Question

我使用html5 +文件阅读器进行了文件预览的文件上传，除了用户选择的旧文件从输入文件字段中销毁并且用户选择新的单个浏览点击时，它工作正常。 / p>

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

Answer 2

您可以将上传的文件存储在将要保留的本地文件数组中。这就是我修改你的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;
       }
   }
});

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

2 个答案: