Question

I have this script:

$.each($(this)[0].files, function(i, file){
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#display_image').prepend("<img src='"+e.target.result+"' />");
            };
            reader.readAsDataURL(input.files[count]);
        }
        count++;

});

so what it does is is simply gets all selected files path from multiple input and appends it to img tag.

Now what i would like to do is give that img id which would be equals to variable count but my problem is that prepending function runs after my main each loop is finished so i always get the same number, like 3, 3, 3 not 1, 2, 3 i guess it’s happening because of reader.onload, but i’m not sure how to do it differently…

Answer 1

Post some more code and I can update and correct the below. But I think you want to use i.

$.each(
   $(this)[0].files, 
   function(i, file){
      if (input.files && input.files[0]) {
         var reader = new FileReader();
         reader.onload = function (e) {
            $('#display_image')
               .prepend("<img id='" i + 
                  "' src='"+e.target.result+"' />"
               );
          };
          reader.readAsDataURL(input.files[i]);
    }

});