AJAX: Asynchronously posting a file to a server
<p>I want to post a file to server asynchronously without posting the form. I have the following code:</p>

<pre><code>var fileInput = document.getElementById('FileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file, file.name);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://servername/controllername/AnalyseFile', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(formData);
</code></pre>

<p>However, when the method is executed on the server, the post body contains no files. The following is from ASP.NET MVC4:</p>

<pre><code>[HttpPost]
public JsonResult AnalyseFile()
{
  int filesCount = Request.Files.Count;
  if(filesCount == 0) { throw new Exception('no files...'); }
  // do stuff
}
</code></pre>

<p>The Files collection contains no files and I can't figure out why. Any help appreciated.</p>