title: MVC Jquery file upload Request.Files is always empty
body: <p>I have been searching online looking for the answer to this problem but I cannot seem to find anything that works, I have the following Controller code:</p>
  
  <pre><code>[HttpPost]
  public ActionResult UploadFiles()
  {
      // If files exist
      if (Request.Files != null &amp;&amp; Request.Files.Count &gt; 0)
      {
          // ** Do stuff
  
          return Json(new { result = true, responseText = "File(s) uploaded successfully" });
      }
  
      // Return no files selected
      return Json(new { result = false, responseText = "No files selected" });
  }
  </code></pre>
  
  <p>And following code in my cshtml page which works fine and the controller can see the files that I upload:</p>
  
  <pre><code>&lt;input type="file" name="files" id="files" accept="image/*;capture=camera" multiple&gt;
  &lt;button type="button" onclick="submitform()"&gt;Submit&lt;/button&gt;
  
  &lt;script&gt;
      function submitform(){
  
          // Get files from upload
          var files = $("#files").get(0).files;
  
          // Create form data object
          var fileData = new FormData();
  
          // Loop over all files and add it to FormData object
          for (var i = 0; i &lt; files.length; i++) {
              fileData.append(files[i].name, files[i]);
          }
  
          // Send files to controller
          var xhr = new XMLHttpRequest();
          xhr.open("POST", "/Quotes/QuoteFiles/UploadFiles", false);
          xhr.send(fileData);     
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>However when I try and change this to work using an Ajax call as shown below then Request.Files in the Controller always has no files. The only bit I have changed is the "Send files to controller" part:</p>
  
  <pre><code>&lt;input type="file" name="files" id="files" accept="image/*;capture=camera" multiple&gt;
  &lt;button type="button" onclick="submitform()"&gt;Submit&lt;/button&gt;
  
  &lt;script&gt;
      function submitform(){
  
          // Get files from upload
          var files = $("#files").get(0).files;
  
          // Create form data object
          var fileData = new FormData();
  
          // Loop over all files and add it to FormData object
          for (var i = 0; i &lt; files.length; i++) {
              fileData.append(files[i].name, files[i]);
          }
  
          // Send files to controller
          $.ajax({
              url: '/Quotes/QuoteFiles/UploadFiles',
              type: "POST",
              contentType: false, // Not to set any content header
              processData: false, // Not to process data
              data:  fileData,
              success: function (result) {
                  alert(result);
              },
              error: function (err) {
                  alert(err.statusText);
              }
          });
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I am running this in Google Chrome but I have tried IE 11 and Edge but not of them work. Can anyone tell me what I am doing wrong?</p>