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时，您不需要在此FormData上使用JSON.stringify。此外，当您发送文件时，内容类型必须为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

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