如何使用 jquery 序列化进行文件上传

2022-08-30 07:24:40

所以我有一个表单,我使用jquery序列化函数通过ajax提交表单

        serialized = $(Forms).serialize();

        $.ajax({

        type        : "POST",
        cache   : false,
        url     : "blah",
        data        : serialized,
        success: function(data) {

        }

但是,如果表单有一个字段怎么办....我如何使用此ajax序列化方法将文件传递到表单中...打印 $_FILES 不会输出任何内容<input type="file">


答案 1

使用对象。它适用于任何类型的表单FormData

$(document).on("submit", "form", function(event)
{
    event.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {
            

        }
    });        

});

答案 2

无法使用 AJAX 上载文件,因为您无法访问存储在客户端计算机上的文件的内容,也无法使用 javascript 在请求中发送该文件。实现这一目标的技术之一是使用隐藏的iframe。有一个很好的jquery表单插件,它允许您AJAXify您的表单,它也支持文件上传。因此,使用此插件,您的代码将如下所示:

$(function() {
    $('#ifoftheform').ajaxForm(function(result) {
        alert('the form was successfully processed');
    });
});

该插件自动负责订阅表单的事件,取消默认提交,序列化值,使用正确的方法并处理文件上传字段,...submit


推荐