在多文件上传器中单击新文件浏览后如何保留旧文件？

Question

我已经使用 html5+文件阅读器进行了带有文件预览的文件上传，它工作正常，除了用户选择的旧文件会从输入文件字段中销毁，并且如果用户在新的单次浏览单击中进行选择。

这是js小提琴 https://jsfiddle.net/sco3pq3b/

html

<p> UPLOAD  </p>
<input type="file" multiple="yes" name="photo[]" id="photos">
<div id="preview"></div>

js

$("#photos").change(function(){

    var fileList = this.files;
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;

    for(var i = 0; i < fileList.length; i++){
        if (regex.test(fileList[0].name.toLowerCase())) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#preview').append('<div class="imgLinkWrap"><a class="fancybox" href="' + e.target.result +'">'+fileList[0].name.toLowerCase()+'</a></div>');
            }
            console.log(fileList[i]);
            reader.readAsDataURL(fileList[i]);

        } else {
            alert(file[0].name + " is not a valid image file.");
            $('#preview').html("");
            return false;
        }
    }
});

单击新的浏览文件后，是否有办法在不使用任何插件或ajax的情况下保留旧文件？

Answer 1

您想保留旧文件，将它们添加到全局变量中

  var fileList //here
    $("#photos").change(function(){
 alert(fileList); //use them 
         fileList = this.files;
         alert(fileList);

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;

        for(var i = 0; i < fileList.length; i++){
            if (regex.test(fileList[0].name.toLowerCase())) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#preview').append('<div class="imgLinkWrap"><a class="fancybox" href="' + e.target.result +'">'+fileList[0].name.toLowerCase()+'</a></div>');
                }
                console.log(fileList[i]);
                reader.readAsDataURL(fileList[i]);

            } else {
                alert(file[0].name + " is not a valid image file.");
                $('#preview').html("");
                return false;
            }
        }
    });

编辑 ：

当您在提交表单后需要它们时，您可以使用 HTML5 本地存储，它存储没有过期日期的数据

  // Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

如果您只想存储一个会话的数据。当用户关闭特定浏览器选项卡时，使用 sessionStorage 对象删除数据

有关 HTML5 本地存储和 sessionStorage 的更多信息，请访问：http://www.w3schools.com/html/html5_webstorage.asp