HTML5 FormData 对象的使用

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。

你可以自己创建一个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对象

想要构造一个包含Form表单数据的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第二版还定义了一个progress事件，可以用来制作进度条。

xhr.upload.onprogress = function (event) {

　　　　if (event.lengthComputable) {

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

　　　　　　console.log(complete)

　　　　}

};

拖放上传

最后，利用HTML5的拖放功能，实现拖放上传。
先在页面中放置一个容器，用来接收拖放的文件。

html

<div id="holder"></div>

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插件便是使用的这种方式，如果想追求更好的兼容性的话，可以一试，加油!