在ajax调用中使用FormData发送JSON对象和文件,并在PHP

时间:2017-05-17 13:13:51

标签: javascript php jquery json ajax

我正在尝试将json对象与ajax调用中的文件一起发送,如下所示

的Javascript

$('#btn').on('click', function(){
    var file_data = $('#imgFile').prop('files')[0];
    var form_data = new FormData();
    let jsonObj = {
        'label1':'value1'
    };
    form_data.append('file', file_data);
    form_data.append('json', jsonObj);//json object which I am trying to send
    $.ajax({
        url: 'uploader.php',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'post',
        success: function(php_script_response){
            console.log(php_script_response);
        }
    });
});

在PHP中我能够成功检索ajax调用中发送的文件,但是我不知道如何访问随该文件一起发送的json对象

PHP

<?php
if ( 0 < $_FILES['file']['error'] ) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
    $file_ext=strtolower(end(explode('.',$_FILES['file']['name'])));
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploadedFiles/1.' . $file_ext);
    echo $_POST['json'];
}

请让我知道如何在php

中检索json对象

2 个答案:

答案 0 :(得分:3)

首先,请注意您只能通过FormData.append()方法追加二进制数据或字符串。提供一个对象意味着将在其上调用toString(),因此该值实际上将变为"[object Object]"

要解决此问题,您需要在JSON.stringify之前手动append()该对象:

let obj = {
    'label1':'value1'
};
form_data.append('file', file_data);
form_data.append('json', JSON.stringify(obj));

然后在PHP中,您可以使用json_decode()对JSON进行反序列化。

但是,将值直接附加到FormData对象会简单得多。这样您就不需要手动序列化/反序列化任何内容:

form_data.append('file', file_data);
form_data.append('label1', 'value1');
form_data.append('foo', 'bar');

然后在你的PHP中:

var label = $_POST['label'];
var foo = $_POST['foo'];

答案 1 :(得分:0)

试试这样:

$.ajax({
    url: 'uploader.php',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data+"&json="+jsonObj,
    type: 'post',
    success: function(php_script_response){
        console.log(php_script_response);
    }
});

PHPp代码应该与$ _POST ['json']

一起使用