移动端使用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);

});

Caniuse上支持列表如下

can_i_use_form_data



移动端使用FormData实现异步上传
文章《移动端使用FormData实现异步上传》二维码
  • 微信打赏
  • 支付宝打赏

无觅相关文章插件,快速提升流量