title: AJAX File Upload with XMLHttpRequest
body: <p>I know there are a lot of similar questions, but I still haven't found a solution for my problem.
  I'm trying to upload a file with XMLHttpRequest, so I developed the code below:</p>
  
  <pre><code>var sendFiles = function(url,onload,onerror,file,headers){
      var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp'),
      upload = xhr.upload;
      API.addEvent(xhr,'readystatechange',function(){
          if(xhr.readyState==4)
              if((xhr.status&gt;=200 &amp;&amp; xhr.status&lt;300) || xhr.status==304){
                  this.response = this.response || this.responseText;
                  onload.call(xhr);
              }else onerror.call(xhr);
      });
      xhr.open('POST',url,true);
      for(var n=0;n&lt;headers.length;n++)
          xhr.setRequestHeader(headers[n]);
      xhr.send(file);
      return xhr;
  };
  </code></pre>
  
  <p>And the PHP-side script is:</p>
  
  <pre><code>&lt;?php
  header('Content-type: text/html;charset=ISO-8859-1');
  $status = 0;
  if(@copy($_FILES['file']['tmp_name'],'test\\' . $_FILES['file']['name']))
      $status = 1;
  else
      $err = '0';
  echo '{
      "status": ' . $status . '
  }';
  ?&gt;;
  </code></pre>
  
  <p>But the var $_FILES['file'] seems to be empty, which means that the file isn't being sent to the server.
  Then i decided to use the FormData Object, in the code below</p>
  
  <pre><code>var sendFiles = function(url,onload,onerror,file,headers){
      var xhr = XMLHttpRequest ? new XMLHttpRequest() : new    ActiveXObject('Microsoft.XMLHttp'),
      upload = xhr.upload,
      formData = new FormData();
      formData.append('file',file);
      API.addEvent(xhr,'readystatechange',function(){
          if(xhr.readyState==4)
              if((xhr.status&gt;=200 &amp;&amp; xhr.status&lt;300) || xhr.status==304){
                  this.response = this.response || this.responseText;
                  onload.call(xhr);
              }else onerror.call(xhr);
      });
      xhr.open('POST',url,true);
      for(var n=0;n&lt;headers.length;n++)
          xhr.setRequestHeader(headers[n]);
      xhr.send(formData);
      return xhr;
  };
  </code></pre>
  
  <p>And it worked, but only with file sizes low to about 8mb. When I try sending a file that has more than 8mb of size, the var <code>$_FILES['file']</code> becomes empty again
  <br><br>
  NOTE: the 'file' var corresponds to something like document.getElementsById('fileInput').files[0];</p>