为什么我的 ajax multipart/form-data POST 请求的正文是空的？

Question

我的 html 中有以下表格：

<form id="formid" action="upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
</form>

我通过 ajax 提交了一个 POST 请求，如下所示：

function upload_ajax(){
  var xhr = new XMLHttpRequest();

  var form = $("#formid");
  var formData = new FormData(form);

  xhr.open("post", form.attr('action') , true);
  xhr.send(formData);
}

但是当我select一个文件和运行upload_ajax()时，文件没有发送到服务器。在检查 POST 请求时，我可以看到正文是空的（边界除外：-------WebKitFormBoundaryzRrtLc7ACnj5mKtE--）。

如果我将 upload_ajax() 替换为下面的 upload_normal()，一切正常：

function upload_normal(){
   $('#formid').submit();
}

任何人都可以帮助我理解我在 ajax 通话中做错了什么吗？

Answer 1

我认为你的错误是 $("#formid") 是 jquery 对象而不是表单。

访问表单写入：

var form = $("#formid")[0];

为什么我的 ajax multipart/form-data POST 请求的正文是空的？

Why is the body of my ajax multipart/form-data POST request empty?

html

javascript

ajax

post

xmlhttprequest