FormData是什么呢？FormData是XMLHttpRequest Level 2添加的一个新的接口，利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件，还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”。比起普通的ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件。
所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。为什么标题说移动端呢？很明显，国内很多网站什么的还在兼容IE8甚至IE7，所以，这个方案在PC端并不是那么好用。早在两年前就有同事不计后果的用上了这个，后来测试发现在IE8下报错才跑来问我，我看了下同事写的代码才发现是个无解的问题，于是同事就开始改造回传统上传模式了。
回归主题，移动端就不同了，目前手机飞速得更新换代，外加上主流手机系统基本都是webkit内核，用上FormData可以说是基本没什么后苦之忧了。那么纠结该怎么用呢？
先看看FormData的构造函数，如下，可以选择是否传入Form对象
new FormData (optional HTMLFormElement form)
FormData的方法，可以传入DomString或者Blob对象
void append(DOMString name, Blob value, optional DOMString filename); void append(DOMString name, DOMString value);
具体点，比如
var formData1 = new FormData(document.getElementById('form'));
var formData2 = new FormData();
formData1.append("name", "朴人博客");
formData1.append("site", "http://www.poorren.com");
formData1.append("file", document.getElementById("file"));
简单的异步发送方式
var xhr = new XMLHttpRequest();
xhr.open("POST" ,"http://www.poorren.com" , true);
xhr.send(formData1);
xhr.onload = function(e) {
if (this.status == 200) {
console.log(this.responseText);
}
};
jQuery、Zepto下异步发送方式
$.ajax({
url: "http://www.poorren.com",
type: 'POST',
data: formData1,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType:false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData:false
}).then(function(res){
console.log(res);
});
上支持列表如下
