html - ひねりを加えたデフォルト値

Question

Stack と私が収集した Web を読むと、セキュリティ上の理由から、このオプションを事前設定することはできません。ただし、ユーザーが入力する必要があるページフォームがいくつかあります。他の変数をセッション変数として保持することで、ページに以前のエントリを記憶させ、そのページ、テキストボックス、ボタンなどが呼び出されたときにそれらを再表示できます。ファイル名入力フォーム コンポーネントで同じことを行う方法がわかりませんでした。回避策がある場合、何かアイデアはありますか?

Answer 1

画像が既にアップロードされている場合は、ロジック サーバー側でアップロードされた画像のサムネイルを表示し、新しい画像をアップロードするオプションを提供する必要があります。その時点で、空のファイル入力が表示されます。何かのようなもの...

if(sessioncontains("uploaded")) {
    out << "<img src=\"" + (sessionget("uploaded")->thumb) + "\"/>";
    out << "<label>Upload a new image</label>";
} else {
    out << "<label>Upload an image</label>";
}
out << "<input type=\"file\"/>";

送信する前にフィールドの値を保存するように編集します。バックグラウンドでサーバーにポストすることができます。ファイルを非同期でアップロードするにはどうすればよいですか? . または、それらをwindow.localStorageデータ URL としてシリアル化することもできます (ストレージの制限に注意してください)。

ジャバスクリプト...

function retrieveFiles() {
    var files = [];
    var json = window.localStorage.getItem("files");
    if(json.length) {
        try {
            files = JSON.parse(json);
        } catch(ex) {
            console.err("There was an error", files, window.localStorage);
        }
    }
    return files;
}

function storeFiles(files) {
    window.localStorage.setItem("files", JSON.stringify(files));
}

$(function() {

    var arr = retrieveFiles();

    $("#file").on("change", function() {
        var files = $(this).prop("files");
        var reader = new FileReader();
        reader.onload = function(e) {
            arr.push(e.target.result);
            storeFiles(arr);
        }
        for(var i = 0; i < files.length; ++i) {
            reader.readAsDataURL(files[i]);
        }
    });

    $("form").on("submit", function() {
        // Post files array arr by AJAX
    });

});

HTML...

<form action="upload" method="post" enctype="multipart/form-data">
    <input type="file" id="file" multiple/>
    <button type="submit">Submit</button>
</form>