Ajax在同一个请求中发送数组和图像 - Ajax send array and Image in same request

Ajax send array and Image in same request

我想做一个ajax调用发送JSON和文件数据到我的PHP后端。这是我当前的ajax调用:

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

数据(jsonData)是一个JSON数组，它也保存来自文件选择的输入(我假设由于类型不匹配这是错误的)。我尝试使用contentType: false和processData: false，但当我试图访问$_POST数据在PHP中没有任何东西。我传递的数据不是来自一个形式，有相当多的，所以我不想使用FormData，并将其附加到该对象。我希望我不会有两个ajax调用来完成这一点。

如果你想发送数据与任何文件，你可以使用FormData对象。

像这样发送您的jsonData:

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

在PHP中，你可以检查你的数据和文件:

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

尝试使用formdata代替正常的序列化json

下面是一个例子:

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

然后在你的ajax

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

你也可以这样尝试

你也可以访问这个答案https://stackoverflow.com/a/35086265/2798643

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

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