jQuery loop on multiple input.files

Question

I need to loop this on a multiple file input:

    var reader = new FileReader();

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

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

I tried this, but it does not work:

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() on fileCount output is a one time 0 on multiple file selection. no further alerts. If I take numbers instead of the fileCount var in code, it works at position. r.g. input.files[2] ...

Any idea?

Answer 1

When you do this: $("input[name='files[]']").each(function() { you are actually getting any elements that match the selector. In this case, you get your single multi file input (which is why you only see 1 alert. What you want to do is iterate over the files.

This page has code to do pretty much exactly what you want. I recommend you check it out:

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

To apply it to your situation, you would do something like this:

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);

}