title: FormData console logs [object FormData ] and not the actual file
body: <p>I have the following code for, uploading the file using ajax because I don't want to use form action . But I unable to do so. The code is :</p>
  
  <pre><code>Select xml file to upload:
  &lt;input type="file" name="fileToUpload" id="uploadFile"&gt;
  &lt;input type="submit" id="upload_xml" value="Upload Xml"&gt;
  </code></pre>
  
  <p>The ajax code is:</p>
  
  <pre><code>$('#upload_xml').on('click', function() {
  
  var file_data = $('#uploadFile').prop('files')[0];      
  var form_data = new FormData();
  console.log('hi'+file_data); // this gives [object File]
  form_data.append('file', file_data);
  console.log('yoyo'+form_data);  // this gives  [object FormData]              
  $.ajax({
      url: 'upload.php',
      dataType: 'text',  
      cache: false,
      contentType: false,
      processData: false,
      data: form_data,                         
      type: 'post',
      success: function(response){
          alert(response); 
      }
   });
  </code></pre>
  
  <p>});</p>
  
  <p>I saw many discussions on various threads, but none work for me. I have done this before without any error, I don't know what is the error :( where I am wrong here. Is there any js file that I need to include??</p>