javascript 没有 jQuery 的 xhr 文件上传

Question

我在没有 jquery 的情况下上传 xhr 文件时遇到了一些麻烦。（请不要说使用jQuery）。

如果浏览器支持 FormData API 并使用它，我听说也可以上传文件。

问题是我不知道如何将附件附加到 FormData 对象中。第二个问题是如何通过 XHR 发送 FormData？我的意思是，请看下面的代码：

var formData = new FormData();
formData.append('somevalue', 'somevalue'); // string
formData.append( ???, ??? ); // file

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Content-type', 'multipart/form-data; charset=UTF-8');

xhr.open('post', 'URL TO UPLOAD', true);
xhr.onreadystatechange = function() { ... };

xhr.send( ?? WHAT SHOULD BE HERE IF THE FORM DATA CONTAINS FILE? JUST FORM DATA ?? );

请看代码，尤其是第二个"formData.append part"。我不知道如何将文件数据附加到 formData 对象中。

其次，如果我想通过 XHR 发送 "formData"，我是否只是像这样将 "formData" 变量放入 "xhr.send" 方法中？

xhr.send(formData);

或者，我应该做更多的事情吗？很难找到关于 google 的信息，所以如果有人知道这个问题，非常感谢告诉我或建议我下一步该怎么做。谢谢！

Answer 1

formData.append( ???, ??? ); // file

是的，一个文件。 the MDN documentation中有一个例子：

formData.append('userpic', myFileInput.files[0], 'chris.jpg');

xhr.setRequestHeader('Content-type', 'multipart/form-data; charset=UTF-8');

删除它。 XHR 将为您生成正确的内容类型。手动执行将无法包含（基本）边界信息。

and second, if i want to send "formData" via XHR, do i just put "formData" variable into "xhr.send" method like this?

是的。

javascript 没有 jQuery 的 xhr 文件上传

javascript xhr file upload without jQuery

javascript

ajax

file-upload

xmlhttprequest

form-data