Question

从阅读Stack和我收集的网页中，出于安全原因，您无法预先填充此选项。但是我有许多用户需要填写的页面表单。通过将其他变量保存为会话变量，我可以让页面记住它们之前的条目，并在该页面被调用时重新显示它们，文本框，按钮等。我避开我们弄清楚如何对文件名输入表单组件做同样的事情。如果有解决方法的任何想法？

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\"/>";

编辑，因此您希望在提交字段之前保存这些字段的值，您可以将它们发布到幕后的服务器上。 How can I upload files asynchronously?。或者您可以将它们序列化为window.localStorage作为数据URL（小心存储限制）。

...的Javascript

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>

<input type =“file”/>带扭曲的默认值

1 个答案: