Question

我抓住文件列表（[http://www.w3.org/TR/FileAPI/#dfn-filelist]）然后我想使用JQuery的每个函数。

var file_list = $(this).attr('files');
/* Code goes here */
file_list.each(function()
{
/* Code goes here */

我收到以下错误：

Uncaught TypeError: Object #<FileList> has no method 'each'

有什么想法吗？谢谢。

Answer 1

这是因为$(this).attr('files');只返回普通的DOM文件列表，而不是jQuery对象。

你需要以旧式的方式循环它：

for(var i=0,file;file=file_list[i];i++) {
 //do your thing
}

或者您可以使用$ .each：

$.each(file_list,function(idx,elm){
     //do your thing
});

请注意，$ .each比plain for循环要慢，在这种情况下给你的便利性很小，所以我坚持使用for循环。

Answer 2

var file_list = $(this).attr('files');
$.each(file_list,function(i,item){
  // i is the index (integer) of current item
  // item is the current item
  // $(this) is the jQuery selector for the current item
});

Answer 3

2011年5月，发布了更改.attr()行为的jQuery 1.6，您应该使用.prop()来访问文件输入的files属性。
是一些处理FileList对象的其他方法。

//Get the files property (FileList object) of a file input element from a jQuery instance.
var arraylike=$file_input.prop('files');
//Create an array from an arraylike object using the old hacky way
file_array=Array.prototype.splice.call(arraylike,0,0);
//Or the new way.
file_array=Array.from(arraylike);
//Or just work on it directly.
Array.prototype.forEach.call(arraylike,x=>{console.log(x);});
//Or if you really must use jQuery...
jQuery.each(arraylike,(k,v)=>{console.log(v);});

如果有人想做自己的研究：

HTML5 FileList和JQuery各自

3 个答案: