title: Looping through files for FileReader, output always contains last value from loop
body: <p>I'm using FileReader API to read files on local.</p>
  
  <pre><code>&lt;input type="file" id="filesx" name="filesx[]" onchange="readmultifiles(this.files)" multiple="" /&gt;
  
  &lt;script&gt;
  function readmultifiles(files) {
      var ret = "";
      var ul = document.querySelector("#bag&gt;ul");
      while (ul.hasChildNodes()) {
          ul.removeChild(ul.firstChild);
      }
      for (var i = 0; i &lt; files.length; i++)  //for multiple files
      {
          var f = files[i];
          var name = files[i].name;
          alert(name);
          var reader = new FileReader();  
          reader.onload = function(e) {  
              // get file content  
              var text = e.target.result;
              var li = document.createElement("li");
              li.innerHTML = name + "____" + text;
              ul.appendChild(li);
          }
          reader.readAsText(f,"UTF-8");
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>If input includes 2 files:</p>
  
  <pre><code>file1 ---- "content1"
  file2 ---- "content2"
  </code></pre>
  
  <p>I get this output:</p>
  
  <pre><code>file2__content1
  file2__content2
  </code></pre>
  
  <p>How to fix code to display:</p>
  
  <pre><code>file1__content1
  file2__content2
  </code></pre>