filereader result order changing while uploading multiple images in javascript

Question

I am trying to upload multiple images and place in separate img tag using javascript.Here is what i tried,

MyJsp.jsp :

  <div>
  <img alt="Image1" id="Image1" src="" width="130px" height="90px"><br><br>
  <img alt="Image2" id="Image2" src="" width="130px" height="90px"><br><br>
  <img alt="Image3" id="Image3" src="" width="130px" height="90px"><br><br> 
  <img alt="Image4" id="Image4" src="" width="130px" height="90px"><br><br>
  <img alt="Image5" id="Image5" src="" width="130px" height="90px"><br><br>
  </div>

<input type="file" id="files" name="files[]" accept="image/gif,image/jpeg"/ multiple>
<input type="text" id="imginsert" value="1">

MyJS.js :

$(function(){
document.querySelector('#files').addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {    

    var files = evt.target.files; // FileList object
   // alert("1");
   // Loop through the FileList and render image files as thumbnails.
   for (var i = 0, f; f = files[i]; i++) {

     // Only process image files.
     if (!f.type.match('image.*')) {
       continue;
     }

     var reader = new FileReader();   
     reader.onload = (function(theFile) {
       return function(e) {
           var count=$('#imginsert').val();
                if(count==1){

                $('#Image1').attr("src",e.target.result);
                $('#imginsert').val('2');

                //alert("first :"+e.target.result);
                }
                else if(count==2)
                {

                    //alert("else if 1");
                    $('#Image2').attr("src",e.target.result);
                    $('#imginsert').val('3');

                    //alert("2 :"+e.target.result);
                }
                else if(count==3)
                {

                    //alert("else if 2");
                    $('#Image3').prop("src",e.target.result);
                    $('#imginsert').val('4');

                    //alert("3 :"+e.target.result);
                }
                else if(count==4)
                {

                    $('#Image4').prop("src",e.target.result);
                    $('#imginsert').val('5');

                    //alert("4 :"+e.target.result);
                }
                else if(count==5)
                {

                    $('#Image5').prop("src",e.target.result);
                    $('#imginsert').val('6');

                    //alert("5 :"+e.target.result);
                }
                else
                {
                    alert("You can upload only 5 images.");
                }

       };

     })(f); 

     // Read in the image file as a data URL.
     reader.readAsDataURL(f);
   }

 }

});

If i uploading Img1.jpg,Img2.jpg,Img3.jpg,Img4.jpg,Img5.jpg means the OP is :

Img2.jpg
Img4.jpg
Img1.jpg
Img3.jpg
Img5.jpg

My Expecting OP is :

Img1.jpg
Img2.jpg
Img3.jpg
Img4.jpg
Img5.jpg

where i am doing mistake to place orderly like uploading images order?

If you upload multiple images to your backend, you usaly dont mix pictures if you want to do different things with them (if thats the reason why the order is important). — Nano
@Nano yes i m trying this like match the following question(Image To Text) so i want to place and show orderly from uploading images, — MMMMS

Musa Musa · Accepted Answer · 2015-01-30T13:02:40

readAsDataURL is asynchronous so you can't guarantee that they will finish in any order. Just pass the index of the file to your IIFE with your file

 reader.onload = (function(theFile, count) {
   return function(e) {
            if (count > 5)
            {
                alert("You can upload only 5 images.");
            }
            else{
                $('#Image'+count).prop("src",e.target.result);
            }

   };

 })(f,i+1);

filereader result order changing while uploading multiple images in javascript

1 Answers