javascript xhr文件上传无需jQuery

javascript xhr file upload without jQuery

本文关键字：jQuery xhr 文件 javascript      更新时间：2024-03-12

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

如果浏览器支持FormDataneneneba 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 ?? );

请查看代码，尤其是第二个"表单数据.附加部分"。我不知道如何将FILEDATA附加到formData对象中。

第二，如果我想通过XHR发送"formData"，我只是把"formData"变量放入这样的"XHR.send"方法中吗？

xhr.send(formData);

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

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

是的，一个文件。MDN文档中有一个示例：

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

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

把它取下来。XHR将为您生成正确的内容类型。手动操作将无法包含（必要的）边界信息。

第二，如果我想通过XHR发送"formData"，我只是把"formData"变量放入这样的"XHR.send"方法中吗？

是的。

相关文章：