使用jquery ajax在同一POST请求中上传文件和JSON数据？

Question

我想发送一个使用jQuery Ajax的POST请求，我想上传一个文件和一些json数据。请发现代码，

var logoImg = $('input[name="logoImg"]').get(0).files[0]; 
var formData = new FormData(); 
formData.append('logo', logoImg); 

var objArr = []; 
objArr.push({ 
    "id": id, 
    "name": userName 
}); 

var obj = [{ 
    "objArr": objArr, 
    "formData": formData 
}]; 

$.ajax({ 
    type: "POST", 
    url: url, 
    dataType: "json", 
    data: JSON.stringify(obj), 
    contentType: "application/json", 
    cache: false, 
    async: false, 
    complete: function(data) { 
    alert("success"); 
    } 
}); 

但我得到“内部服务器错误：500”，并且后端API不被调用。

请帮我在同一个AJAX请求中发送一个文件和一个数组obj。在此先感谢

Answer 1

您不能序列化您在请求中发送的任何二进制数据。

要与FormData对象发送更多的信息，只需要用append()方法添加它，类似于你是如何与图像本身：在选项中的重要部分设置contentType

var logoImg = $('input[name="logoImg"]').get(0).files[0]; 
var formData = new FormData(); 
formData.append('logo', logoImg); 
formData.append('id', id); 
formData.append('name', userName); 

$.ajax({ 
    type: "POST", 
    url: url, 
    data: formData, 
    contentType: false, 
    processData: false, 
    cache: false, 
    complete: function(data) { 
    alert("success"); 
    } 
}); 

注和processData至false，并删除async: false，以便请求异步发生。

最后要注意的是，如果你想在发送请求的输入都包含在同一个表单中您可以使用FormData构造函数来简化你的代码只是：

var formData = new FormData($('#yourForm')[0]);