如何使用 jquery 提交多部分表单数据

Posted 2023-03-05

【中文标题】如何使用 jquery 提交多部分表单数据

【英文标题】：How to submit multipart formdata using jquery

【发布时间】：2017-02-04 14:27:41

【问题描述】：

<form id="uploadForm" enctype="multipart/form-data" action="http://localhost:1337/ad/upload" method="post" name="uploadForm" novalidate>
    <input type="file" name="userPhoto" id="userPhoto" />
    <input type="submit" value="submit" id="uploadImage" />
</form>

这是我的 html 表单，它接受图像作为文件 inout，用户可以选择图像文件，然后单击提交。这可行，但当前页面的 url 更改为 localhost:1337/ad/upload。我希望页面保持在相同的 url。

$("form#uploadForm").submit(function(event) 
    event.preventDefault();
    var formData = new FormData($(this)[0]);
    var posting = $.post(url, formData);

)

我尝试过使用 jquery 发送表单，但出现错误：未捕获类型错误：非法调用

类型为multipart /formdata时表单提交什么数据，如何在jQuery上获取这些数据

【问题讨论】：

使用这个var formData = new FormData(this)

【参考方案1】：

您可以将所有表单都交给formData进行处理

var form = $('#uploadForm')[0]; 
// You need to use standart javascript object here
var formData = new FormData(form);

或为 formdata 指定确切的数据

var formData = new FormData();
formData.append('userPhoto', $('input[type=file]')[0].files[0]); 

【参考方案2】：

流程数据

默认情况下，作为对象（从技术上讲，除了字符串之外的任何内容）传入 data 选项的数据将被处理并转换为查询字符串，适合默认的内容类型“application/x-www-form -urlencoded”。如果要发送 DOMDocument 或其他未处理的数据，请将此选项设置为 false。

请查看jQuery Ajax Documentation

尝试这样的 ajax -

var form = new FormData($("#uploadForm")[0]);
$.ajax(
        url: your_url,
        method: "POST",
        dataType: 'json',
        data: form,
        processData: false,
        contentType: false,
        success: function(result),
        error: function(er)
);