jQuery pętli na wielu input.files

Question

muszę pętli to na wielokrotne wejście Plik:

var reader = new FileReader(); 

    reader.onload = function (e) { 
     $('#pprev_0') 
     .attr('src', e.target.result); 
    }; 

    reader.readAsDataURL(input.files[0]); 

Próbowałem to, ale to nie działa:

var fileCount = 0; 
$("input[name='files[]']").each(function() { 

    var reader = new FileReader(); 

    reader.onload = function (e) { 
     $('#pprev_'+fileCount) 
     .attr('src', e.target.result) 
     .css("display","block"); 
    }; 

    reader.readAsDataURL(input.files[fileCount]); 

    fileCount++; 
}); 

alert() na FileCount Wynik jest jednorazowy 0 przy wielokrotnym wyborze pliku. bez dalszych ostrzeżeń. Jeśli wziąłem liczby zamiast kodu pliku fileCount w kodzie, działa on na pozycji. r.g. input.files [2] ...

Masz pomysł?

Answer 1

Kiedy to zrobisz: $("input[name='files[]']").each(function() { faktycznie otrzymujesz elementy pasujące do selektora. W takim przypadku otrzymasz pojedyncze wejście do wielu plików (dlatego wyświetlany jest tylko jeden alert, a następnie chcesz wykonać iterację plików.)

Ta strona zawiera kod pozwalający wykonać dokładnie to, co chcesz. polecam to sprawdzić:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

aby zastosować go do sytuacji, by zrobić coś takiego:

var files = $('#files')[0].files; //where files would be the id of your multi file input 
//or use document.getElementById('files').files; 

for (var i = 0, f; f = files[i]; i++) { 

    var reader = new FileReader(); 

    reader.onload = function (e) { 
     $('#pprev_'+fileCount) 
     .attr('src', e.target.result) 
     .css("display","block"); 
    }; 

    reader.readAsDataURL(f); 

}