使用 FormData 对象，服务器收到一个空的 POST

2022-01-15 00:00:00 xmlhttprequest php javascript ajax

我正在尝试使用 FormData 对象向我的服务器发送一个文件和一个文本变量.查看 Chrome 开发者工具中的网络选项卡，我可以看到文件和变量正在发送.但是，我在 $_POST 和 $_FILES 变量上尝试了 var_dump() ，两者都显示为空数组.这是我用于表单的代码:

I'm attempting to send one file and one text variable to my server with the FormData object. Looking at the Network tab in Chrome's developer tools, I can see that the file and variable are being sent. However, I've tried var_dump() on the $_POST and $_FILES variables, and both are shown as empty arrays. Here's the code I'm using for the form:

var image_upload = document.getElementById("image_upload");

if(image_upload.value == '')
{
   alert("Please select a file to upload.");
}
else
{
   alert("in");
   var ajaxHandler = new XMLHttpRequest();
   var content = image_upload.files[0];
   var formData = new FormData();
   formData.append("type", "5");
   formData.append("content", content)

   ajaxHandler.onreadystatechange = function() {
      if(ajaxHandler.readyState == 4)
      {
         alert(ajaxHandler.responseText);
      }
   };

   ajaxHandler.open("POST", "newCard", false);
   ajaxHandler.setRequestHeader("Content-type","multipart/form-data");
   ajaxHandler.send(formData);
}

我已经尝试过在内容类型中使用和不使用charset=utf-8"的这段代码，但它似乎没有任何区别.这是怎么回事?

I have tried this code with and without "charset=utf-8" in the content type, and it doesn't seem to make a difference. What's going on here?

推荐答案

从代码中删除 ajaxHandler.setRequestHeader("Content-type","multipart/form-data");.正确的 multipart/form-data 标头应包含边界字符串.如果您在 FormData 中添加文件，浏览器会自动设置该标题.

Remove the ajaxHandler.setRequestHeader("Content-type","multipart/form-data"); from the code. The proper multipart/form-data header should contain boundary string. Browser automatically set that header, if you add file in FormData.

相关文章