Ajaxは配列と画像を同じリクエストで送信します

Question

私はPHPバックエンドにJSONとファイルの両方のデータを送信するajax呼び出しを行いたいと思います。

$.ajax({ 
    type: 'POST', 
    dataType: 'json', 
    data: jsonData, 
    url: 'xxx.php', 
    cache: false, 
    success: function(data) { 
     //removed for example 
    } 
}); 

データ（jsonData）（私はこれが原因型の不一致に間違っていると仮定しています）また、ファイルからの入力を保持しているJSON配列が同様に選択している：これは、現在、私のAJAX呼び出しです。私はcontentType: falseとprocessData: falseを使ってみましたが、PHPの$_POSTのデータにアクセスしようとすると何もありません。私が渡しているデータはフォームから来ておらず、かなりあるので、FormDataを使用してそのオブジェクトに追加したくありません。私はこれを達成するために2つのajax呼び出しを行う必要はないと思っています。

Answer 1

ファイルと一緒にデータを送信する場合は、FormDataオブジェクトを使用できます。

そのようとしてあなたjsonDataを送信：PHPに比べ

var jsonData = new FormData(document.getElementById("yourFormID")); 

、あなたのようにあなたのデータやファイルを確認できます。

<?php 
print_r($_POST); // will return all data 
print_r($_FILES); // will return your file 
?> 

Answer 2

formdataの代わりに、通常のシリアル化されたJSONを使用してみてください

ここに例を示します。

あなたのAJAXで、その後

var formData = new FormData(); 
formData.append("KEY", "VALUE"); 
formData.append("file", document.getElementById("fileinputID").files[0]); 

$.ajax({ 
    type: 'POST', 
    url: "YOUR URL", 
    data: formData, 
    contentType: false, 
    processData: false, 
    dataType: 'json', 
    success: function (response) { 
     CallBack(response, ExtraData); 
    }, 
    error: function() { 
       alert("Error Posting Data"); 
      } 
    }); 

Answer 3

あなたはまた、 https://stackoverflow.com/a/35086265/2798643

HTML

<input id="fuDocument" type="file" accept="image/*" multiple="multiple" /> 

この答えを訪問することができ、また、このよう

を試すことができます

JS

var fd = new FormData(); 
var files = $("#fuDocument").get(0).files; // this is my file input in which We can select multiple files. 
fd.append("kay", "value"); //As the same way you can append more fields 

for (var i = 0; i < files.length; i++) { 
    fd.append("UploadedImage" + i, files[i]); 
} 

$.ajax({ 
    type: "POST", 
    url: 'Url', 
    contentType: false, 
    processData: false, 
    data: fd, 
    success: function (e) { 
     alert("success");      
    }   
})