title: filereader result order changing while uploading multiple images in Javascript
body: <p>I am trying to upload multiple images and place in separate img tag using Javascript. Here is what I tried,</p>
  <p>MyJsp.jsp :</p>
  <pre><code>  &lt;div&gt;
    &lt;img alt=&quot;Image1&quot; id=&quot;Image1&quot; src=&quot;&quot; width=&quot;130px&quot; height=&quot;90px&quot;&gt;&lt;br&gt;&lt;br&gt;
    &lt;img alt=&quot;Image2&quot; id=&quot;Image2&quot; src=&quot;&quot; width=&quot;130px&quot; height=&quot;90px&quot;&gt;&lt;br&gt;&lt;br&gt;
    &lt;img alt=&quot;Image3&quot; id=&quot;Image3&quot; src=&quot;&quot; width=&quot;130px&quot; height=&quot;90px&quot;&gt;&lt;br&gt;&lt;br&gt; 
    &lt;img alt=&quot;Image4&quot; id=&quot;Image4&quot; src=&quot;&quot; width=&quot;130px&quot; height=&quot;90px&quot;&gt;&lt;br&gt;&lt;br&gt;
    &lt;img alt=&quot;Image5&quot; id=&quot;Image5&quot; src=&quot;&quot; width=&quot;130px&quot; height=&quot;90px&quot;&gt;&lt;br&gt;&lt;br&gt;
    &lt;/div&gt;
  
  &lt;input type=&quot;file&quot; id=&quot;files&quot; name=&quot;files[]&quot; accept=&quot;image/gif,image/jpeg&quot;/ multiple&gt;
  &lt;input type=&quot;text&quot; id=&quot;imginsert&quot; value=&quot;1&quot;&gt;
  </code></pre>
  <p>MyJS.js :</p>
  <pre><code>$(function(){
  document.querySelector('#files').addEventListener('change', handleFileSelect, false);
          
  function handleFileSelect(evt) {    
      
      var files = evt.target.files; // FileList object
     // alert(&quot;1&quot;);
     // 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(&quot;src&quot;,e.target.result);
                  $('#imginsert').val('2');
                  
                  //alert(&quot;first :&quot;+e.target.result);
                  }
                  else if(count==2)
                  {
                      
                      //alert(&quot;else if 1&quot;);
                      $('#Image2').attr(&quot;src&quot;,e.target.result);
                      $('#imginsert').val('3');
                      
                      //alert(&quot;2 :&quot;+e.target.result);
                  }
                  else if(count==3)
                  {
                      
                      //alert(&quot;else if 2&quot;);
                      $('#Image3').prop(&quot;src&quot;,e.target.result);
                      $('#imginsert').val('4');
                      
                      //alert(&quot;3 :&quot;+e.target.result);
                  }
                  else if(count==4)
                  {
                      
                      $('#Image4').prop(&quot;src&quot;,e.target.result);
                      $('#imginsert').val('5');
                      
                      //alert(&quot;4 :&quot;+e.target.result);
                  }
                  else if(count==5)
                  {
                      
                      $('#Image5').prop(&quot;src&quot;,e.target.result);
                      $('#imginsert').val('6');
                      
                      //alert(&quot;5 :&quot;+e.target.result);
                  }
                  else
                  {
                      alert(&quot;You can upload only 5 images.&quot;);
                  }
                              
         };
         
       })(f); 
  
       // Read in the image file as a data URL.
       reader.readAsDataURL(f);
     }
  
   }
          
  });
  </code></pre>
  <p>If I'm uploading Img1.jpg,Img2.jpg,Img3.jpg,Img4.jpg,Img5.jpg means the OP is:</p>
  <pre><code>Img2.jpg
  Img4.jpg
  Img1.jpg
  Img3.jpg
  Img5.jpg
  </code></pre>
  <p>My expected OP is :</p>
  <pre><code>Img1.jpg
  Img2.jpg
  Img3.jpg
  Img4.jpg
  Img5.jpg
  </code></pre>
  <p>where am I doing a mistake is it to place orderly like uploading images order?</p>