AJAX - 表单数据未发送到 PHP

Question

我正在制作一个表单来上传带有验证码的文件，但 ajax 没有发送表单数据。

index.html:

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);

表格：

<form id="upload_form" enctype="multipart/form-data" method="post">
    <div><div id="recaptcha" class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div></div>
    <div><input type="file" name="file" id="file" onchange="uploadFile()"></div>
</form>

文件.php：

<?php
var_dump($_POST);
var_dump($_FILES);
?>

两者都返回空数组

编辑：表单数据仍然没有随这一行发送

ajax.send(new FormData(document.querySelector("form")));

Answer 1

由于您的表单存在于您的 HTML 中，您可以通过将表单元素传递给 FormData 构造函数来轻松构造一个包含来自<form> 的数据的 FormData 对象。来自Mozilla's docs：

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

如果您向提交时触发的表单添加事件侦听器，您可以使用this 引用该表单。

document.getElementById('form').addEventListener('submit', function(e){
    e.preventDefault();
    var data = new FormData(this);
})