Question

我正在尝试创建一个HTML文件输入字段，该字段可以多次添加文件（在这种情况下为图像），而不是替换现有的选定文件。

文件字段将始终替换先前的选择。我要尝试的是每次用户选择文件时将选择内容存储在其他位置。

$("#imageInput").change(function() {
    if(typeof window.images == "undefined"){
        window.images = this.files;
    }
    else {
        var k = 0;
        console.log(window.images.length); //always equals to this.files.length
        for (var i = window.images.length; i < window.images.length + this.files.length; i++) {
            window.images[i] = this.files[k];
            k++;
        }
    }
});

HTML输入标签：

<input type="file" id="imageInput" multiple accept="image/*">

此解决方案不起作用，因为window.images数组总是在选择新文件时重置。

Answer 1

indexOf：

indexOf（）方法返回调用字符串中的索引指定值首次出现的对象，从在fromIndex上搜索。如果找不到该值，则返回-1。

  
     var images = [];
     var imagesName = [];
    $("#imageInput").change(function() {
       
        for(var i=0;i<this.files.length;i++)
        {  
              
             if(imagesName.indexOf(this.files[i].name)==-1)
             {
               console.log(this.files[i]);
               images.push(this.files[i]);
               imagesName.push(this.files[i].name);
             }
             
         }
        
        console.log(imagesName);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" id="imageInput" multiple accept="image/*">

Answer 2

找到了解决方案。这有效：

$("#imageInput").change(function() {
    var filesArr = Array.prototype.slice.call(this.files);
    filesArr.forEach(function(f) {
        window.images.push(f);
    });
    console.log(window.images);
});

Answer 3

最好使用Array.concat()将所有新文件放在数组的末尾：

window.images = [];
$("#imageInput").change(function() {
    window.images = window.images.concat(this.files);
});

如果您使用的是ES6，则可以使用扩展运算符和Array.push()：

window.images = [];
$("#imageInput").change(function() {
    window.images.push(...this.files);
});

...具有保留相同数组对象，只是使其更长的优点。

保留选定的图像，而不是用新图像替换

3 个答案: