使用Ajax将FormData对象发送到服务器（包含文件）

我有一个包含文本和文件字段的表单。 我试图将整个事情提交给托管在服务器上的php脚本，并返回validation消息。 我的表单看起来像这样：

 Name:   
 Age:   
 Instagram Account:   
 Photograph Upload:  
 Why should you represent Drip Cold Pressed Juice?  Apply!  

我的jQuery看起来像：

 jQuery("#ambassador").submit(function(event) { event.preventDefault var server = "http://getdripped.com/dev/ambassador.php"; var form = document.getElementById('#ambassador'); var formData = new FormData(form); alert(formData); jQuery.ajax({ url: server, type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }); 

php只包含$_FILES数组的print_r语句和$_POST数组的另一个语句。 但是两个返回的数组都是空的。

Answer 1

你有两个问题。

未能将表单传递给FormData对象

 document.getElementById('#ambassador'); 

getElementById方法接受一个id，但是你传递了一个选择器 。 你需要删除# 。 目前，您将null传递给new FormData （因为没有匹配的元素，因此gEBId返回null ）。

表格中没有成功的数据

表单控件只有在具有name属性且没有name属性的情况下才能成功。

一旦更正了ID，就可以使用表单中的所有成功控件填充表单数据对象：但是没有。

您需要为每个输入添加名称属性。

Answer 2

我会使用iframe作为表单的目标。

另请参阅如何使用iframe进行异步（AJAX）文件上载？

Answer 3

忽略downvote，和

将async设置为true！

您将async设置为false。 这意味着您的成功回调将不会等待回复并在PHP回答之前很久就完成。

---

如果您遇到更多麻烦，请查看此SO问题，因为已经有答案。

来自jQuery文档 ：

请注意，同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作。

Quentin对序列化是正确的，我在进一步阅读后删除了序列化选项。