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

Question

我想构建一个应用程序表单，其中 on 可以在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) {
        // ...
    }
});

解释：

如此处所述。如果将processData设置为 true，则会将其作为查询字符串传递。如果要发送未处理的数据，请将其设置为 false 。

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

Answer 2

试试这个：

$('#submit_application').click(function () {
    var formData=new FormData();
    formData.append('action','submit');
    formData.append('someStringifiedJSON', ''+JSON.stringify(foo));
    formData.append($('#image_upload').files[0]);
    $.ajax({
        url: 'submit.php',
        type: 'post',
        contentType:false,
        data: formData,
        success: function (data, status) {
            // ...
        },
        error: function (xhr, desc, err) {
            // ...
        }
    });
});

确保在 ajax 请求中添加此contentType:false。