title: AJAX - Form Data not being sent to PHP
body: <p>I am making a form to upload files with a captcha, but ajax is not sending the Form Data.</p>
  
  <p>index.html:</p>
  
  <pre><code>var file = _("file").files[0];
  
  // The next two lines print the correct variables
  console.log("file", file);
  console.log("response", grecaptcha.getResponse());
  
  var formdata = new FormData();
  formdata.append("file", file);
  formdata.append("g-recaptcha-response", grecaptcha.getResponse());
  
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file.php");
  ajax.send(formdata);
  </code></pre>
  
  <p>form:</p>
  
  <pre><code>&lt;form id="upload_form" enctype="multipart/form-data" method="post"&gt;
      &lt;div&gt;&lt;div id="recaptcha" class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;input type="file" name="file" id="file" onchange="uploadFile()"&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>file.php:</p>
  
  <pre><code>&lt;?php
  var_dump($_POST);
  var_dump($_FILES);
  ?&gt;
  </code></pre>
  
  <p>Both of which return empty arrays</p>
  
  <p>Edit: Form data is still not sent with this line</p>
  
  <pre><code>ajax.send(new FormData(document.querySelector("form")));
  </code></pre>