如何在javascript中读取对象filelist数组?

时间:2013-02-12 01:54:21

标签: javascript jquery arrays html5 arraylist

我创建了一个数组来存储所选文件的列表。好吧,我必须说实话,我查了代码,当我意识到它符合我的目的时,我就用它了。现在我需要访问这个数组才能手动删除一些文件,但我尝试使用每个扇区的索引,但这不起作用。

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

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

});

如果包含对象fileList或从数组中获取索引,我怎么能读取数组文件[]?

3 个答案:

答案 0 :(得分:3)

以下是我理解您的代码的方式:

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

因此,如果要迭代文件数组中的所有元素,可以在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对象的单维数组,其行为与数组类似......除了你可以' t删除/拼接项目 - 它们是只读的。

有关无法删除原因的详细信息,请参阅:How do I remove a file from the FileList

答案 1 :(得分:1)

由于您使用的是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/

答案 2 :(得分:-1)

这样的东西?

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