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

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

您可以将上传的文件存储在将被保留的本地文件数组中。这就是我修改你的js的方式，这似乎工作正常。

var fileList=[];
$("#photos").change(function(){
    fileList.push.apply(fileList,this.files); // appends files objects to local array
    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;
       }
   }
});

Answer 2

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

  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 Local Storage 它存储没有过期日期的数据

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

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

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