zepto ajax promise,移动端使用FormData实现异步上传

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);

});

移动端使用FormData实现异步上传

微信打赏

支付宝打赏