title: FormData append not working
body: <p>I wrote this to upload an image to my local Apache webserver using <code>input</code> element in HTML. The <code>file</code> is logged as not empty, but why is the <code>form_data</code> completely empty?</p>
  
  <pre><code>$('#upload-image').change(function(e){
      var file = e.target.files[0];
      var imageType = /image.*/;
      if (!file.type.match(imageType))
          return;
      console.log(file);
      var form_data = new FormData();
      form_data.append('file', file);
      console.log(form_data);
      $.ajax({
          url: 'http://localhost/upload.php',
          cache: false,
          contentType: false,
          processData: false,
          data: form_data,
          type: 'POST',
          success: function(response){
              console.log(response);
          },
          error: function(error){
              console.log(error);
          }
      });
  
  });
  </code></pre>
  
  <p>This is my <code>upload.php</code> on local webserver</p>
  
  <pre><code>&lt;?php
      header('Access-Control-Allow-Origin: *');
      if ( 0 &lt; $_FILES['file']['error'] ) {
          echo 'Error: ' . $_FILES['file']['error'] . '&lt;br&gt;';
      }
      else {
          move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
          $target_path = $_SERVER['DOCUMENT_ROOT'] . "/uploads/" . $_FILES['file']['name'];
          echo $target_path;
      }
  ?&gt;
  </code></pre>
  
  <p>The <code>console.log(response)</code> logs all the code lines of PHP file, instead of the returned result of <code>echo</code></p>