title: html5 multiple xmlhttprequest more response
body: <p><strong>Hi guys!</strong></p>
  
  <p>I've got a little problem with my <strong>HTML5 XMLHttprequest</strong> uploader.</p>
  
  <p>I read files with <strong>Filereader</strong> class from <em>multiple file input</em>, and after that upload one at the time as binary string. On the server I catch the bits on the input stream, put it in tmp file, etc. This part is good. The program terminated normally, send the response, and I see that in the header (eg with FireBug).
  But with the JS, I catch only the last in the '<em>onreadystatechange</em>'.</p>
  
  <p>I don't see all response. Why? If somebody can solve this problem, it will be nice :)</p>
  
  <p>You will see same jQuery and Template, don't worry :D</p>
  
  <p><em>This is the JS:</em></p>
  
  <pre><code>function handleFileSelect(evt)
  {
      var files = evt.target.files; // FileList object
  
      var todo = {
              progress:function(p){
                  $("div#up_curr_state").width(p+"%");
                  },
  
              success:function(r,i){
  
                  $("#img"+i).attr("src",r);
                  $("div#upload_state").remove();
                  },
  
              error:function(e){
                  alert("error:\n"+e);
                  }
          };
  
  
      // Loop through the FileList and render image files as thumbnails.
      for (var i = 0, f; f = files[i]; i++) {
          // Only process image files.
          if (!f.type.match('image.*')) {
              continue;
          }
  
          var reader = new FileReader();
          var row = $('ul#image_list li').length;
              row = row+i;
          // Closure to capture the file information.
          reader.onload = (function(theFile,s) {
              return function(e) {
              // Render thumbnail.
              $("span#prod_img_nopic").hide();
              $("div#prod_imgs").show();
              var li = document.createElement('li');
              li.className = "order_"+s+" active";
              li.innerHTML = ['&lt;img class="thumb" id="img'+s+'" src="', e.target.result,
                                  '" title="', escape(theFile.name), '"/&gt;&lt;div id="upload_state"&gt;&lt;div id="up_curr_state"&gt;&lt;/div&gt;Status&lt;/div&gt;'].join('');
              document.getElementById('image_list').insertBefore(li, null);
              };
          })(f,row);
  
          // Read in the image file as a data URL.
          reader.readAsDataURL(f);
  
          //upload the data
          //@param object fileInputId     input file id
          //@param int    fileIndex       index of fileInputId
          //@param string URL             url for xhr event
          //@param object todo            functions of progress, success xhr, error xhr
          //@param string method          method of xhr event-def: 'POST'
  
          var url = '{/literal}{$Conf.req_admin}{$SERVER_NAME}/{$ROOT_FILE}?mode={$_GET.mode}&amp;action={$_GET.action}&amp;addnew=product&amp;imageupload={literal}'+f.type;
  
          upload(f, row, url, todo);
  }
  </code></pre>
  
  <p>the upload function:</p>
  
  <pre><code>function upload(file, fileIndex, Url, todo, method)
   {
          if (!method) {
              var method = 'POST';
          }
  
          // take the file from the input
  
          var reader = new FileReader();
          reader.readAsBinaryString(file); // alternatively you can use readAsDataURL
          reader.onloadend  = function(evt)
          {
                  // create XHR instance
                  xhr = new XMLHttpRequest();
  
                  // send the file through POST
                  xhr.open(method, Url, true);
  
                  // make sure we have the sendAsBinary method on all browsers
                  XMLHttpRequest.prototype.mySendAsBinary = function(text){
                      var data = new ArrayBuffer(text.length);
                      var ui8a = new Uint8Array(data, 0);
                      for (var i = 0; i &lt; text.length; i++) ui8a[i] = (text.charCodeAt(i) &amp; 0xff);
                      var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)(); 
                      bb.append(data);
                      var blob = bb.getBlob();
                      this.send(blob);
                  }
  
                  // let's track upload progress
                  var eventSource = xhr.upload || xhr;
                  eventSource.addEventListener("progress", function(e) {
                      // get percentage of how much of the current file has been sent
                      var position = e.position || e.loaded;
                      var total = e.totalSize || e.total;
                      var percentage = Math.round((position/total)*100);
                      // here you should write your own code how you wish to proces this
                      todo.progress(percentage);        
                  });
  
                  // state change observer - we need to know when and if the file was successfully uploaded
                  xhr.onreadystatechange = function()
                  {  
                          if(xhr.status == 200 &amp;&amp; xhr.readyState == 4)
                          {                                
                              // process success                               
                              resp=xhr.responseText;
  
                              todo.success(resp,fileIndex);
                          }else{
                              // process error
                              todo.error(resp);
                          }                            
                  };
  
                  // start sending
                  xhr.mySendAsBinary(evt.target.result);
          };
     }
  
      }
  }
  </code></pre>
  
  <p>and the starter event</p>
  
  <pre><code>document.getElementById('files').addEventListener('change', handleFileSelect, false);
  </code></pre>