javascript - ajax 中的 jQuery 表单提交(带文件)

Question

这里有数百个这样的问题，但我搜索了又搜索，但找不到问题的答案。我的目标是提交整个表格，包括其中的任何潜在文件。这是我的非功能代码:

$(target + " form.dialog").submit(function(){
    var data = new FormData($(this));
    $.ajax({
        url: $(this).attr("action"),
        type: "post",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            // Do stuff..
        }
    });
    return false;
});

所以，基本上，我还没有找到使用 $(this) 作为 FormData() 类的参数的 jQuery 代码。根据规范，应该能够向类提交“表单元素”，我假设 $(this) 实际上并没有这样做。大多数示例如下所示:

var data = new FormData($('#myform')[0]);

但是我的实现处理在 jQuery dialog() 中加载的任何表单，它是通过 ajax 从服务器加载的 HTML，所以我无法事先知道表单必须专门针对它的 ID。

即使我这样调用它:

var data = new FormData($(target + " form.dialog")[0]);

没有任何反应，或者更确切地说，没有提交任何参数。这是 jQuery 版本问题吗？ “目标”变量始终是“#dialog”形式的 ID，我是否需要通过其他方式查找和检索表单元素？

当我这样做时:

console.log(typeof($(target + " form.dialog")[0]))

返回“对象”，我假设它是 FormData() 类的错误类型...感谢任何帮助。

Answer 1

FormData 是普通 JS，它不接受 jQuery 对象而是普通 JS 表单，只需使用:

var data = new FormData(this);

$.ajax({
    url: $(this).attr("action"),
    type: "post",
    data: data,
    ....
});