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

要求で送信するバイナリデータをシリアル化することはできません。

ちょうどあなたがイメージそのものであるかに類似し、それを追加するappend()メソッドを使用し、FormDataオブジェクトに追加情報を送信するには：

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"); 
    } 
}); 

はオプションで重要な部分に注意がcontentTypeを設定していると、 processData〜falseを削除し、要求が非同期的に発生するようにasync: falseを削除します。

は最後に、あなたがリクエストで送信したい入力はすべて同じフォーム内に含まれている場合は、あなたのコードを簡素化するためにFormDataコンストラクタを使用することができることに注意だけに：

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