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

Question

让我们直接进入代码:

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(data)中的响应是空的.

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

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

Answer 1

当您通过jQuery发送ajax请求并且想要发送FormData时,您不需要JSON.stringify在此FormData 上使用.此外,当您发送文件时,内容类型必须multipart/form-data包含boundry- 类似这样的内容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);
    }
});

Answer 2

如果您做的完全与以前的答案相同，但仍然无法正常工作，请不要担心 its working

也许intelligence and quick wath 是在告诉你not working

但不要担心，看看 network tap

它的工作

希望这可以节省您的时间