HTML5 FileList 和 JQuery 各自

Question

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

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

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 2

2011年5月，jQuery 1.6发布，它改变了.attr()的行为，您应该使用.prop()来访问文件 > 文件输入的属性。
这里有一些处理 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);});

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

• jQuery 1.6 版本
• $.fn.attr
• $.fn.prop
• $.each
• Array.prototype.slice
• Array.from
• Array.prototype.forEach

Answer 3

这是因为 $(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 比普通的 for 循环慢，在这种情况下给你带来的便利很少，所以我会坚持使用for 循环。