Filereader Does Not Render The Image From Multiple Files

I have this multiple type file input and then when onChange event is triggered unto the input file then it will loop through each file and then create a FileReader() and then rende

Solution 1:

FileReader returns results asynchronously. You can create a closure to use within for loop to process each file.

document.querySelector("input")
  .onchange = function(e) {
    for (var i = 0; i < e.target.files.length; i++) {
      // use IIFE as a closure
      (function(file) {
        var img = document.createElement("img");
        var reader = newFileReader();
        reader.onload = function(e) {
          img.src = e.target.result;
          document.body.appendChild(img);
        }
        reader.readAsDataURL(file);
      })(e.target.files[i]); // pass current File to closure 
    }
  }

img {
  width: 50px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="file"multiple><br><br><br>