HTML5 FileList и jQuery каждый

Я хватаю список файлов ([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'

есть идеи? Спасибо.

6
each file html5 javascript jquery

3 ответов

потому что $(this).attr('files'); просто возвращает простой список файлов DOM, а не объект jQuery.

либо вам нужно зациклиться на нем старомодным способом:

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

или вы можете использовать $.каждый:

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

имейте в виду, что $.каждый из них медленнее, чем обычный цикл for, и в этом случае дает вам очень мало удобства, поэтому я бы придерживался цикла for.

10
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
});
1

в мае 2011 года был выпущен jQuery 1.6, который изменил поведение .attr(), вы должны использовать .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);});

в случае, если кто-то хочет делать свои собственные исследования:

0