如何使用jquery提交multipart formdata

时间:2016-09-27 05:17:03

标签: jquery html ajax forms multipartform-data

<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表单,它接受图像作为文件输入,用户可以选择图像文件,然后单击提交。这有效,但当前页面的网址更改为localhost:1337 / ad / upload。我希望页面保持相同的URL。

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

})

我试过这个使用jquery发送表单但是我收到一个错误:Uncaught Type error:Illegal Invocation

当类型为multipart / formdata时,表单提交了什么数据?如何在jQuery上获取此数据

2 个答案:

答案 0 :(得分:20)

<强>过程数据

默认情况下,作为对象传入数据选项的数据(技术上,不是字符串)将被处理并转换为查询字符串,适合默认内容类型“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){}
});

答案 1 :(得分:0)

您可以向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]);