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

Posted 2023-05-08

【中文标题】如何在 javascript 中读取对象文件列表数组？

【英文标题】：How can i read an object filelist array in 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 或从数组中获取索引，我如何读取它？

【参考方案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