title: Reading multiple files in a loop using HTML5 File API
body: <p>I am using the HTML5 File API to read binary files. The user can select multiple files and then click a button to copy them into a JavaScript object. My code is listed here:</p>
  
  <pre><code>   &lt;script&gt;         
       var data = new Object;
       function ReadFiles()
       {
           var files = document.getElementById('file').files;
           for (var i = 0; i &lt; files.length; i++) {
               var reader = new FileReader();
               reader.onloadend = function (evt) {
                   if (evt.target.readyState == FileReader.DONE) {
                       data["File_Content" + i] = btoa(evt.target.result);
                   }
               };
               reader.readAsBinaryString(files[i]);
           }
       }
     &lt;/script&gt;
     &lt;input type="file" id="file" name="file[]" multiple /&gt;
     &lt;button onclick="ReadFiles();"&gt;Read Files&lt;/button&gt;
  </code></pre>
  
  <p>If the user puts in three files, then only an invalid property 'File_Content3' will be added to the 'data' object with value; the other three valid properties 'File_Content0', 'File_Content1' and 'File_Content2' are not created.</p>
  
  <p>Can anybody solve the problem? Thanks.</p>