title: Javascript FileReader Multiple Images
body: <p>I am trying to implement javascript's FileReader Interface in my project.</p>
  
  <p>The requirement: There is a file input field which is "multiple" enabled, I want the user should select a few images and should see the images on the page even before hitting submit(so that (s)he may delete it if (s)he wants!). But the problem is that only one image is displayed on the screen. 
  The  tags are created but the src is empty except for the last image.   </p>
  
  <p>The code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="windows-1252"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;form action="upload.php" method="post" enctype="multipart/form-data"&gt;
              &lt;input type="file" name="abc[]" multiple/&gt;
              &lt;input type="submit"/&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;img id="image0"/&gt;
  &lt;/body&gt;
  
  &lt;script src="resources/js/jquery-2.1.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script&gt;
      $('document').ready(function () {
          $("input[name='abc[]']").change(function (e) {
              console.log(e.originalEvent.srcElement.files.length);
              for (var i = 1; i &lt;= e.originalEvent.srcElement.files.length; i++) {
  
                  var file = e.originalEvent.srcElement.files[i-1];
                  var img = document.createElement("img");
                  img.id = "image"+i;
                  var reader = new FileReader();
                  reader.onloadend = function () {
                      img.src = reader.result;
                  }
                  reader.readAsDataURL(file);
                  $("#image"+(i-1)).after(img);
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>For Example, in the image selection popup if I have selected img1. img2 and img3, only img3 is displayed. however, on hitting submit I do get all the images at the server side:
  <img src="https://i.stack.imgur.com/P4Zkx.png" alt="enter image description here"></p>
  
  <p>What am I missing here?</p>