jQuery loop on multiple input.files

javascript, jquery

Solution

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

}

Problem

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?

Original source