使用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]);