title: Ajax POST request via jQuery and FormData - $_POST empty on PHP
body: <p>I wish to upload an image to the server via ajax using jQuery and FormData. </p>
  
  <p>My jQuery code is as follows</p>
  
  <pre><code>var formData = new FormData("form")[0];
    var fileName = $("#InputLogo")[0].files[0].name;
  
    $.ajax ( {
        url : 'upload.php',
        type : 'POST',
        data : { "data" : formData, "fileName" : fileName },
        processData : false,
        success : function(data) {
            console.log(data);
            alert(data);
        }
    });
  </code></pre>
  
  <p>This code is called when the user selects a new file to upload.</p>
  
  <p>MY server backend is  PHP  and it handles the request as follows</p>
  
  <pre><code>$data = $_POST['data'];
  $fileName = $_POST['fileName'];
  $fp = fopen('/img/'.$fileName, 'w');
  fwrite($fp, $data);
  fclose($fp);
  $returnData = array("data" =&gt; $data);
  print_r($_POST);
  </code></pre>
  
  <p>The POST request does occur, but <strong>$_POST</strong> remains empty.</p>
  
  <p>I tried searching for the solution but couldn't find an exact one.</p>
  
  <p>Any suggestions would be appreciated.</p>
  
  <p><strong>EDIT :</strong>  Here is the form in HTML </p>
  
  <pre><code>&lt;form id=card-form" method="post" action="" &gt;
        &lt;div class="form-group"&gt;
      &lt;label for="InputName"&gt;Name of the Company&lt;/label&gt;
      &lt;input type="text" class="form-control" id="InputName" placeholder="Enter a name"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
      &lt;label for="InputEmail"&gt;Email&lt;/label&gt;
      &lt;input type="email" class="form-control" id="InputEmail" placeholder="Enter email"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
      &lt;label for="InputLogo"&gt;Choose a company logo&lt;/label&gt;
      &lt;input type="file" id="InputLogo" accept="image/*"&gt;
      &lt;p class="help-block"&gt;For good visibility, please limit the image to 200 x 200 px&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>