title: How to upload a file using jQuery.ajax and FormData
body: <p>When I use XMLHttpRequest, a file is correctly uploaded using <a href="https://developer.mozilla.org/en/XMLHttpRequest/FormData" rel="noreferrer"><code>FormData</code></a>. However, when I switch to <a href="http://api.jquery.com/jQuery.ajax/" rel="noreferrer"><code>jQuery.ajax</code></a>, my code breaks.</p>
  
  <p>This is the working original code: </p>
  
  <pre><code>function uploadFile(blobFile, fileName) {
      var fd = new FormData();
      fd.append("fileToUpload", blobFile);
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "upload.php", true);
      xhr.send(fd);
  }
  </code></pre>
  
  <p>Here is my unsuccessful <code>jQuery.ajax</code> attempt:</p>
  
  <pre><code>function uploadFile(blobFile, fileName) {
      var fd = new FormData();
      fd.append("fileToUpload", blobFile);
      var xm = $.ajax({
          url: "upload.php",
          type: "POST",
          data: fd,
      });
  }
  </code></pre>
  
  <p>What am I doing wrong? How can I get the file to be uploaded correctly, using AJAX?</p>