javascript xhrファイルjQueryなしでアップロード

Question

jqueryなしでxhrファイルをアップロードするにはいくつかの問題があります。 （jQueryを使ってはいけないと言ってください）。

ブラウザがFormData APIをサポートしていれば、ファイルをアップロードすることもできると聞きました。

問題はFormDataオブジェクトにどのように添付ファイルがあるのか​​わかりません。 2番目の問題は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 ??); 

特に2番目の "formData.append part"を見てください。 FormDataオブジェクトにFILE DATAを追加する方法がわかりません。

2番目に、XHRを介して "formData"を送信したい場合は、このように "formData"変数を "xhr.send"メソッドに入れますか？

xhr.send(formData); 

また、もっと何かすればいいですか？それは誰かがこの問題について知っている場合、それは非常に私に教えたり、私は次に行うべきアドバイスを私に教えていただければ幸いです。ありがとう！

Answer 1

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

はい、ファイル。

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

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

はそれを削除します。the MDN documentationの例があります。 XHRは正しいコンテンツタイプを生成します。手動で行うと、（必須の）境界情報が含まれなくなります。

2番目に、XHRを介して "formData"を送信したい場合は、このように "formData"変数を "xhr.send"メソッドに置きますか？

はい。