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

时间:2013-11-09 01:44:44

标签: php jquery ajax upload

如何通过$ .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>

3 个答案:

答案 0 :(得分:2)

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

小提琴

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

答案 1 :(得分:0)

当你在PHP中获取它时,我会JSON.stringify然后json_decode

var data = JSON.stringify({/ * object * /});

然后在你的PHP中 $ data = json_decode(....);

答案 2 :(得分:0)

尝试定义新变量

var name = "hello";

然后将其插入$.ajax data

    $.ajax({
        url: 'post.php',
        type: 'POST',
        data: "form_data="+form_data+"&name="+name,
        success: function (data) {

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

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

我从来没有测试过这个剧本,但是无需检查它:D