javascript - jQuery 提交表单(带文件和文本)，无需从当前窗口重定向

Question

我想构建一个应用程序form，其中可以在div(不是表单元素)内附加图像 - 它只是几个输入元素。处理表单时无需进行页面重定向。所以我使用ajax。到目前为止一切正常。但现在我需要添加图像。

$('#submit_application').click(function () {
//...
    $.ajax({
        url: 'submit.php',
        type: 'post',
        data: {
            'action': 'submit',
            'image': $('#image_upload').val(),
             // ..
            'someStringifiedJSON': JSON.stringify(foo)
        },
        success: function (data, status) {
            // ...
        },
        error: function (xhr, desc, err) {
            // ...
        }
    });
});

如何将我的文件放入 php 的 $_FILES 变量中？或者我如何将文件传递给 php 以便我可以上传它？

Answer 1

您可以使用 formData 发送文件.

var file = $('#image_upload')[0].files[0];
var fData = new FormData();
fData.append('action', 'submit');
fData.append('image', file);
fData.append('someStringifiedJSON', JSON.stringify(foo));

你的ajax请求将是:

$.ajax({
    url: 'submit.php',
    type: 'post',
    data: fData ,
    contentType: false,
    processData: false,
    success: function (data, status) {
        // ...
    },
    error: function (xhr, desc, err) {
        // ...
    }
});

说明:

指定here .如果您将 processData 设置为 true，它将作为查询字符串传递。如果您想发送未处理的数据，请将其设置为 false。

contentType 的默认值为 application/x-www-form-urlencoded； charset=UTF-8.这不适用于文件(因为它发送像multipart/form-data;boundary=----------------这样的heder -----------125911542220235) 当您将其设置为 false 时浏览器会自动生成正确的内容类型 header