Question

我想进行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，但当我尝试在PHP中访问$_POST数据时，没有任何内容。我传递的数据不是来自一个表单而且有很多它所以我不想使用FormData并将它附加到该对象。我希望我不必进行两次ajax调用来实现这一目标。

Answer 1

如果要将数据与任何文件一起发送，请使用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
?>

Answer 2

尝试使用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");
          }
    });

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

Ajax在同一请求中发送数组和Image

3 个答案: