没有jQuery的javascript xhr文件上传

时间:2016-04-07 12:08:29

标签: javascript ajax file-upload xmlhttprequest form-data

我在没有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"。我不知道如何将FILE DATA附加到formData对象。

第二,如果我想发送" formData"通过XHR,我只是把" formData"变成" xhr.send"像这样的方法?

xhr.send(formData);

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

1 个答案:

答案 0 :(得分:3)

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将为您生成正确的内容类型。手动执行将无法包含(基本)边界信息。

  

第二,如果我想发送" formData"通过XHR,我只是把" formData"变成" xhr.send"像这样的方法?