php - jQuery + php 文件上传。传递多个参数

Question

如何通过 $.ajax 将额外的变量传递给 post.php？

我的第一个变量是

var form_data = new FormData($(this)[0])

我可以单独传递，但是如果我想添加另一个变量并制作一个数组

data {
    "form_data": form_data,
    "name": "hello"
}

它不起作用。

我当前的代码:

$(document).ready(function() { 
    $("form#data").submit(function(){

        var form_data = new FormData($(this)[0]);

        $.ajax({
            url: 'post.php',
            type: 'POST',
            data: form_data,
            success: function (data) {

                $('#result').html(data); 

            },
            contentType: false,
            processData: false
        });

        return false;
    });
});

<div id="result"></div>

<form id="data" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <button>Submit</button>
</form>

Answer 1

试试这个。 formData 对象有一个方法 append。我们将改用它。我们将在文件名下追加该文件。在 PHP 中，使用 $_FILES['file'] 访问它。现在为要添加到其中的数组或对象。在其上使用 JSON.stringify 将其转换为字符串。我们附加 JSON 字符串并将其添加到名称“object”。要在 PHP 中访问 JSON，json_decode($_POST['object']) 会将其转换为对象。

fiddle

$(function(){
    $("form#data").submit(function (e) {
        e.preventDefault();
        var form_data = new FormData(),
            o = {};
        o.name = 'Adam';
        o.arr = ['test', 213];
        form_data.append('file', $('input[name="file"]', this)[0].files[0]);
        form_data.append('object', JSON.stringify(o));
        $.ajax({
            url: '/info/',
            type: 'POST',
            data: form_data,
            success: function (data) {

                $('#result').html(data);

            },
            contentType: false,
            processData: false
        });

        return false;
    });
});