HTML 5 FormDataオブジェクトの使用

FormDataオブジェクトは、XMLHttpRequestでデータを送信するために、データをキー値ペアにコンパイルするために使用されます.主にフォームデータの送信に使用されますが、フォームとは独立してキー付きデータの送信にも使用できます.
FormDataオブジェクトを自分で作成し、append()メソッドを呼び出してフィールドを追加することができます.

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //  123456           "123456"

// HTML     input，     
formData.append("userfile", fileInputElement.files[0]);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

HTMLフォームからFormDataオブジェクトを作成する
フォームデータを含むFormDataオブジェクトを作成するには、FormDataオブジェクトの作成時にフォームの要素を指定する必要があります.
例:

var formElement = document.querySelector("form");

var request = new XMLHttpRequest();

request.open("POST", "submitform.php");

request.send(new FormData(formElement));

また、Formフォームデータを含むFormDataオブジェクトを作成した後、リクエストを送信する前に、FormDataオブジェクトに追加のデータを追加することもできます.

var formElement = document.querySelector("form");

var formData = new FormData(formElement);

var request = new XMLHttpRequest();

request.open("POST", "index.php");

formData.append("Id", 10);

request.send(formData);

進捗バーのアップロード
XMLHttpRequestの第2版では、進捗バーを作成するために使用できるprogressイベントも定義されています.

xhr.upload.onprogress = function (event) {

　　　　if (event.lengthComputable) {

　　　　　　var complete = (event.loaded / event.total * 100 | 0);

　　　　　　console.log(complete)

　　　　}

};

ドラッグ＆ドロップアップロード
最後に、HTML 5のドラッグアンドドロップ機能を利用して、ドラッグアンドドロップアップを実現します.ドラッグ＆ドロップしたファイルを受信するためのコンテナをページに配置します.
html

css

#holder {
　　border: 10px dashed #ccc;
　　width: 300px;
　　min-height: 300px;
　　margin: 20px auto;
}

#holder.hover {
　　border: 10px dashed #0c0;
}

js

var holder = document.getElementById('holder');

holder.ondragover = function () { this.className = 'hover'; return false; };

holder.ondragleave = function () { this.className = ''; return false; };

holder.ondrop = function (event) {

　　event.preventDefault();

　　this.className = '';

　　var files = event.dataTransfer.files;

　　//       

};

ジャンプアップロードファイルがなく、iframeで実現することもできます.jQueryにはformプラグインがあります.