formData对象无法使用jquery AJAX发布?

让我们直接进入代码:

var formData = new FormData(); formData.append('name', dogName); formData.append('weight', dogWeight); formData.append('activity', dogActivity); formData.append('age', dogAge); formData.append('file', document.getElementById("dogImg").files[0]); console.log(formData); 

在这里,我将一些字符串和一个文件对象附加到formData对象,以便将所有信息异步发送到服务器。

在那之后,我有这个jquery ajax请求:

 $.ajax({ type: "POST", url: "/foodoo/index.php?method=insertNewDog", data: formData, processData: false, contentType: false, success: function(response){ console.log(response); }, error: function(){ } }); 

所以在这里我试图将信息发布到服务器上,在服务器上的php文件中我有一个简单的POST的POST文件,所以我看到了什么通过,什么没有。

不幸的是我在console.log(数据)中的响应是空的。

此外,如果您在“网络”选项卡中选中“HEADER”,则会得到以下空输出:

在此处输入图像描述

成功函数被调用(仅用于澄清)

当您通过jQuery发送ajax请求并且想要发送FormData时,您不需要在此FormData上使用JSON.stringify 。 此外,当您发送文件时,内容类型必须是multipart/form-data包括boundry – 类似于multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA

因此,要通过jQuery ajax发送包含一些文件的FormData,您需要:

  • 无需任何修改即可将data设置为FormData。
  • processData设置为false (允许您阻止jQuery自动将数据转换为查询字符串)。
  • contentType设置为false (这是必需的,否则jQuery将错误地设置它)。

您的请求应如下所示:

 var formData = new FormData(); formData.append('name', dogName); // ... formData.append('file', document.getElementById("dogImg").files[0]); $.ajax({ type: "POST", url: "/foodoo/index.php?method=insertNewDog", data: formData, processData: false, contentType: false, success: function(response) { console.log(response); }, error: function(errResponse) { console.log(errResponse); } }); 

如果你完全像过去的anwswer那样仍然没有工作,不要担心its working

也许intelligence and quick wath告诉你它not working

在此处输入图像描述

但不要担心,看看network tap 在此处输入图像描述

它的工作

希望这可以节省您的时间

 //For those who use plain javascript var form = document.getElementById('registration-form'); //id of form var formdata = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open('POST','form.php',true); // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //if you have included the setRequestHeader remove that line as you need the // multipart/form-data as content type. xhr.onload = function(){ console.log(xhr.responseText); } xhr.send(formdata);