title: get the result from the FileReader()
body: <p>I have the following problem.</p>
  
  <p>I have an upload form for multiple files. The upload process goes fine. The problem is related with the FileReader() result. As I am uploading multiple files(images) I need to create corresponding thumbs when the upload is finished.</p>
  
  <pre><code>files = e.target.files;
  
  for (var i = 0; i &lt; files.length; i++) {
  
      //ajax request goes here
  
      var reader = new FileReader();
      reader.onload = (function (e) {
  
          var img = document.createElement('img');
          img.file = e;
          img.className = 'thumbs_';
          img.src = e.target.result;
  
          //Every image has a wrapper div with the id 'nDv0','nDv1','nDv2' etc.                   
  
          document.getElementById('nDv' + i).appendChild(img);
      })(e);
  
      reader.readAsDataURL(files[i]);
  
      //request sent
  
  }
  </code></pre>
  
  <p>If I remove the closures around the anonymous function, i's value will be anything when the for loop exits. 
  For example, if there are 3 files, i's value will be 3 and the results will be appended to the last wrapper div and images will be displayed.</p>
  
  <p>With closures every image is getting appended to the corresponding div, but the images won't be displayed as the returned result is undefined.</p>
  
  <p>So, how can I append every thumb to its corresponding div?     </p>