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

Question

<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表单，它接受图像文件作为文件输入。用户可以选择图像文件，然后点击提交。这个功能可以运行，但当前页面的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发送表单，但是出现了错误：Uncaught Type error: Illegal Invocation

当类型为multipart/form-data时，表单提交的数据是什么，如何在jQuery中获取这些数据。

- nikhil.g777

---

使用此代码 var formData = new FormData(this)。 - Atul Sharma

Answer 1

processData

默认情况下，传递给数据选项的数据（严格来说，除了字符串以外的任何内容）将被处理并转换为查询字符串，以适应默认的内容类型“application/x-www-form-urlencoded”。如果您想发送DOMDocument或其他未经处理的数据，请将此选项设置为false。

请参阅jQuery Ajax文档

尝试像这样使用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){}
});

- Developer

Answer 2

您可以将所有表单数据传递给formData以进行处理。

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

或者为表单数据指定精确的数据。

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

- Rahul Patel

Answer 3

对于那些寻求更现代化方法的人，您可以使用JS Fetch（无需额外的库 - jquery）。

    var formData = new FormData(this);

    fetch(url, { 
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (response.ok) {
        //success
      } else {
        throw Error('Server error');
      }
    })
    .catch(error => {
       console.log('fail', error);
    });

- GetoX

---

如果您正在调用MVC ActionResult控制器，则在发送HttpStatusCodeResult响应时，要从服务器获取statusDescription可能会很困难。 - Post Impatica