title: XMLHttpRequest does not send file
body: <p>I want to upload a file trough a XMLHttpRequest. i have looked everywhere for examples and found quite a few. But i cant figer out what it is i am doing wrong. This is my code. The function is triggerd when a button is pressed. It not wrapped in from tags</p>
  
  <pre><code>function upl_kost() {
  var url = "proces_data.php?ref=upload_kost";
  var hr;
  var file = document.getElementById("file_kost");
  var formData = new FormData();
  
  formData.append("upload", file.files[0]);
  
  if (window.XMLHttpRequest) {
      hr=new XMLHttpRequest();
    } else {
      hr=new ActiveXObject("Microsoft.XMLHTTP");
    }
  hr.open("POST", url, true);
  
  hr.setRequestHeader("Content-type", "multipart/form-data");
  
  hr.onreadystatechange = function() {
     if(hr.readyState == 4 &amp;&amp; hr.status == 200) {
          var return_data = hr.responseText;
          alert(return_data);
      }
  }
  hr.send(formData);
  }
  </code></pre>
  
  <p>and this function catches it.</p>
  
  <pre><code>if($_GET['ref'] == 'upload_kost') {
  var_dump($_FILES);
  }
  </code></pre>
  
  <p>My problem is that the $_FILES stays empty. When i look at the file.files variable in the js its loaded with the data from the file that i am trying to upload. </p>
  
  <p>Thanks!</p>