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'm 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 expected OP is :

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

where am I doing a mistake is it 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, Commented Jan 30, 2015 at 10:33
@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
– MMMMS, Commented Jan 30, 2015 at 10:36

Musa · Accepted Answer · 2015-01-30 13:02:40Z

5

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

answered Jan 30, 2015 at 13:02

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MMMMS Over a year ago

Thank You for valuable answer.Its working fine like what i expected.

Collectives™ on Stack Overflow

filereader result order changing while uploading multiple images in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related