title: FormData() not working in Firefox and Internet Explorer; only Chrome is OK
body: <p>I am trying to build an AJAX image upload using FormData() and it is not working for Firefox and IE. In Chrome everything behaves well; the php script receives form-data object and returns response as expected. </p>
  
  <p>However, in Firefox and Internet Explorer an empty string is always returned as a response (the AJAX call is successfully sent). When I check in the plain Network tab, the size of content is 0. When I check this in Firebug's Network tab, POST tab it actually says that my FormData() contains the file:</p>
  
  <p><em>Content-Disposition: form-data; name="fileToUpload"; filename="9VMyIQM4Vg8.jpg" Content-Type: image/jpeg</em></p>
  
  <p>But content-length is 0 and php script cannot retrieve the file.
  Even if I try creating FormData() manually with append, it doesn't help.</p>
  
  <p>Firefox version 35.0.1 (and docs say the FormData() should work just fine) and IE version 11 (so it's supposed to handle FormData() too). Any help will be very much appreciated!</p>
  
  <p>Here is my code (I shortened php script for testing).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form method="post" action='upload.php' name='imageUploadForm' id="imageUploadForm" enctype="multipart/form-data"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for='fileToUpload'&gt;Select image to upload:&lt;/label&gt;
                  &lt;input type="file" name="fileToUpload" id="fileToUpload" /&gt;
                  &lt;button type="submit" name="uploadBtn" id="uploadBtn"&gt;Preview image&lt;/button&gt;
                  &lt;p id='uploadResult'&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$('#imageUploadForm').on('submit', function (event) {
  var form = $(this);
  event.preventDefault();
  var formData = false;
  if (window.FormData) {
      formData = new FormData(form[0]);
  }
  
  $.ajax({
      type: 'POST',
      url: 'upload.php',
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      success: function (data) {
          console.log("success");
          console.log(data);
          $('#uploadResult').text(data);
      },
      error: function (data) {
          console.log("error");
          console.log(data);
          $('#uploadResult').text(data);
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>PHP:</p>
  
  <pre><code>if ($_POST) {
  if (!empty($_FILES['fileToUpload']['name'])) {
      $image = basename($_FILES['fileToUpload']['name']);
      $target_file = $target_dir . $userID . "_" . basename($_FILES["fileToUpload"]["name"]);
  
      echo $target_file;
  
  } else {
      print 'Please select a file to upload.';
  }}
  </code></pre>
  
  <p>Even if I try to send empty form, I don't get the error "Please select the file to upload".</p>