Html 5ファイルのアップロードとブラウザからバックエンドにファイルを送信する方法

Question

ファイルのアップロードにこのhttps://www.html5rocks.com/en/tutorials/file/dndfiles/のようなHtml5 File APIを使用する方法のチュートリアルをいくつか見てきました。 私が欲しいのは、ブラウザからバックエンドにすべてのものを送ってそこで処理して実際にファイルをアップロードする方法のいくつかの指針です。これらのチュートリアルでは表示されていません。

バックエンド言語は関係ありません。

そして、私は外部のjsライブラリを使用したくないです。純粋なjavascriptだけです。

Answer 1

document.getElementById('fileinput').addEventListener('change', function(){ 
var fd = new FormData(); 
    for(var i = 0; i<this.files.length; i++){ 
var file = this.files[i]; 
fd.append("upload_file"+i, file); 
} 
uploadFile(fd); 
} 

function uploadFile(fd){ 
var url = 'server/index.php'; 
var xhr = new XMLHttpRequest(); 

xhr.open("POST", url, true); 
xhr.onreadystatechange = function() { 
    if(xhr.readyState == 4 && xhr.status == 200) { 
     // Every thing ok, file uploaded 
     console.log(xhr.responseText); // handle response. 
    } 
}; 
xhr.send(fd); 
} 

次のHTMLを使用してください。

<input type="file" id="fileinput" multiple="multiple" accept="image/*" />