如何在 javascript 中读取对象文件列表数组？答案

【问题标题】：How can i read an object filelist array in javascript?如何在 javascript 中读取对象文件列表数组？
【发布时间】：2013-01-27 06:27:12
【问题描述】：

我创建了一个数组来存储选定文件的列表。好吧，老实说，我查看了代码，当我意识到它可以满足我的目的时，我就使用了它。现在我需要访问这个数组来手动删除一些文件，但是我尝试过使用每个扇区的索引，但这不起作用。

这就是我创建数组和存储文件的方式。

 var files = [];
 $("button:first").on("click", function(e) {
                $("<input>").prop({
                    "type": "file",
                    "multiple": true
                }).on("change", function(e) {
                    files.push(this.files);
                }).trigger("click");

});

如果数组 files[] 包含对象 fileList 或从数组中获取索引，我如何读取它？

【问题讨论】：

标签： javascript jquery arrays html arraylist

【解决方案1】：

我是这样理解你的代码的：

每次单击 dom 中的第一个按钮时，都会生成一个接受多个文件的文件输入对话框。返回时，对话会发出一个change 事件，其中一个files 变量（一个FileList 对象）附加到函数上下文（this）。您的代码将新创建的 FileList 推送到 files 数组中。由于输入接受多个文件，因此推入files 数组的每个对象都是一个 FileList 对象。

因此，如果您想遍历 files 数组中的所有元素，您可以在 change 事件处理程序中放置一个函数：

var files = [];
$("button:first").on("click", function(e) {
    $("<input>").prop({
        "type": "file",
        "multiple": true
    }).on("change", function(e) {
        files.push(this.files);
        iterateFiles(files);
    }).trigger("click");
});


function iterateFiles(filesArray)
{
    for(var i=0; i<filesArray.length; i++){
        for(var j=0; j<filesArray[i].length; j++){
            console.log(filesArray[i][j].name);
            // alternatively: console.log(filesArray[i].item(j).name);
        }
    }
}

在我写的iterateFiles() 函数中，filesArray[i][j] 并不是一个真正的多维数组——而是一个包含 FileList 对象的单维数组，其行为与数组非常相似……除了你不能删除/拼接其中的项目——它们是只读的。

有关您无法删除的原因的更多信息，请参阅：How do I remove a file from the FileList

【讨论】：

让我告诉你：“总有一天，我希望在编程方面达到你的一半。”是的，我真诚地说。读完后，我了解到 filelist 对象是只读的，所以我不得不重新考虑如何发送额外的数据。因此，我创建了另外两个数组：一个包含文件的索引，另一个包含用户想要删除的文件。我通过 ajax 将这两个数据与 objectFilelist 一起发送，并使用 php 文件，我做了所有的魔法。这是一个痛苦的，但是，它可以执行。非常感谢你。
@MichaelVidal 你是怎么做到的。我一直在寻找那种解决方案，但我做不到。请帮帮我

【解决方案2】：

由于您使用的是 jQuery，因此您可以使用 $.grep

files=$.grep( files, function(elementOfArray, indexInArray){
       /* evaluate by index*/
       return indexInArray != someValue;
       /* OR evaluate by element*/
       return  elementOfArray != someOtherValue;
});

API 参考：http://api.jquery.com/jQuery.grep/

【讨论】：

我想在FileList 对象上使用Array.prototype.some，但它不是一个数组。我想我可以尝试转换它，但是这个grep 解决方案与我的....length > 0 添加配对给了我一个很好的布尔值。在 API 中一目了然没有看到这个函数，谢谢！
@Pysis 可以在 Filelist 或其他数组（如对象）上使用 [].some.call()

【解决方案3】：

这样的？

for(var i = 0; i < files.length; i++) {
   alert(files[i][0].name);
   if (files[i][0].name == 'file.jpg') {
      files.splice(i, 1) //remove the item
   }
}

也就是说，由于您选择它的方式，每个 FileList 中始终存在一个文件。因此，对于每个文件列表，您只对其中的第一个文件感兴趣。对于每个文件，您只需获取此处定义的属性：http://help.dottoro.com/ljbnqsqf.php

【讨论】：