title: jQuery upload PDF with FormData?
body: <p>I am attempting to upload a file through jQuery to my remote server, but I can't seem to get it working.</p>
  
  <p>The user needs to be able to upload a pdf file, which will then be processed by the server and saved to the root folder.</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('form').submit(function (e) {
      var fd = new FormData();
      fd.append('file', $('#file')[0].files[0]);
      $.ajax({
          cache: false,
          beforeSend: function (xhr) {
              xhr.setRequestHeader("Cache-Control", "no-cache");
              xhr.setRequestHeader("pragma", "no-cache");
          },
          url: 'http://www.codekraken.com/testing/pointify/test.php?callback=?',
          data: fd,
          dataType: "json",
          processData: false,
          contentType: false,
          type: 'POST',
          success: function (data) {
              console.log(data);
          },
          error: function (data) {
              console.log(data);
          }
      });
      e.preventDefault();
  });
  </code></pre>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>&lt;?php
  header('content-type: application/json; charset=utf-8');
  
  $name = $_FILES["fd"]["name"];
  echo ($_GET['callback'] . '('.json_encode($name).')');
  ?&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form&gt;
      &lt;input type="file" id="file" name="file"&gt;
      &lt;input type="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I submit a file, such as <code>input.pdf</code> and then press submit, I get the response <code>(null)</code>. I would expect to get the name of the file, <code>input.pdf</code>, which means I am missing a crucial step in this process.</p>