xmlhttprequest2.0 可以支持文件上传.这东东很方便,但是在实际使用中碰到了一些问题.这里记录下.

正常情况下我们是这样生成2进制文件的.

//data为文件的base64编码

function dataURLtoBlob(data) {

var tmp = data.split(',');

tmp[1] = tmp[1].replace(/s/g,'');

var binary = atob(tmp[1]);

var array = [];

for(var i = 0; i < binary.length; i++) {

array.push(binary.charCodeAt(i));

}

return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});

}

但是在android手机上可能会由于没有blob对象导致无法生成blob.怎么办捏.可以使用以下代码:

function newBlob(data, datatype){

var out;

try {

out = new Blob([data], {type: datatype});

//一切正常,直接使用blob.

} catch (e) {

window.BlobBuilder = window.BlobBuilder ||

window.WebKitBlobBuilder ||

window.MozBlobBuilder ||

window.MSBlobBuilder;

if (e.name == 'TypeError' && window.BlobBuilder) {

var bb = new BlobBuilder();

bb.append(data.buffer);

out = bb.getBlob(datatype);

//还可以抢救一下..使用blobbuilder来生成文件..

} else {

//没救了,放弃治疗.

}

}

return out;

}

ok.现在文件已经ready了.

我们创建一个formadata

var file = dataURLtoBlob(img);

fd.append('img',file);

愉快的上传….然后…然后…没有然后了…抓包看下.

------WebKitFormBoundarysToAVAYMLPFfJF96

Content-Disposition: form-data; name="img"; filename="blob"

Content-Type: application/octet-stream

------WebKitFormBoundarysToAVAYMLPFfJF96--

文件的内容呢…

好吧..既然没法愉快用formdata..那么就自己动手生成一个post的包体吧…下面是相关的代码..

function FormDataShim () {

var o = this,

parts = [],// Data to be sent

boundary = Array(5).join('-') + (+new Date() * (1e16*Math.random())).toString(32),

oldSend = XMLHttpRequest.prototype.send;

this.append = function (name, value, filename) {

parts.push('--' + boundary + 'rnContent-Disposition: form-data; name="' + name + '"');

if (value instanceof Blob) {

parts.push('; filename="'+ (filename || 'blob') +'"rnContent-Type: ' + value.type + 'rnrn');

parts.push(value);

} else {

parts.push('rnrn' + value);

}

parts.push('rn');

};

//把xhr的send方法重写一下.

XMLHttpRequest.prototype.send = function (val) {

var fr,

data,

oXHR = this;

if (val === o) {

// 最后加一下boundary..注意这里一定要在最后加rn..否则服务器有可能会解析参数失败..

parts.push('--' + boundary + '--rn');

data = new XBlob(parts);

fr = new FileReader();

fr.onload = function () { oldSend.call(oXHR, fr.result); };

fr.onerror = function (err) { throw err; };

fr.readAsArrayBuffer(data);

// 设置content-type

this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

XMLHttpRequest.prototype.send = oldSend;

}

else {

oldSend.call(this, val);

}

};

}

最后完整的代码长这样.

function newBlob(data, datatype){

var out;

try {

out = new Blob([data], {type: datatype});

}

catch (e) {

window.BlobBuilder = window.BlobBuilder ||

window.WebKitBlobBuilder ||

window.MozBlobBuilder ||

window.MSBlobBuilder;

if (e.name == 'TypeError' && window.BlobBuilder) {

var bb = new BlobBuilder();

bb.append(data.buffer);

out = bb.getBlob(datatype);

}

else if (e.name == "InvalidStateError") {

out = new Blob([data], {type: datatype});

}

else {

}

}

return out;

}

// 判断是否需要blobbuilder

var needsFormDataShim = (function () {

var bCheck = ~navigator.userAgent.indexOf('Android')

&& ~navigator.vendor.indexOf('Google')

&& !~navigator.userAgent.indexOf('Chrome');

return bCheck && navigator.userAgent.match(/AppleWebKit/(d+)/).pop() <= 534;

})(),

blobConstruct = !!(function () {

try { return new Blob(); } catch (e) {}

})(),

XBlob = blobConstruct ? window.Blob : function (parts, opts) {

var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder);

parts.forEach(function (p) {

bb.append(p);

});

return bb.getBlob(opts ? opts.type : undefined);

};

function FormDataShim () {

// Store a reference to this

var o = this,

parts = [],// Data to be sent

boundary = Array(5).join('-') + (+new Date() * (1e16*Math.random())).toString(32),

oldSend = XMLHttpRequest.prototype.send;

this.append = function (name, value, filename) {

parts.push('--' + boundary + 'rnContent-Disposition: form-data; name="' + name + '"');

if (value instanceof Blob) {

parts.push('; filename="'+ (filename || 'blob') +'"rnContent-Type: ' + value.type + 'rnrn');

parts.push(value);

} else {

parts.push('rnrn' + value);

}

parts.push('rn');

};

// Override XHR send()

XMLHttpRequest.prototype.send = function (val) {

var fr,

data,

oXHR = this;

if (val === o) {

//注意不能漏最后的rn ,否则有可能服务器解析不到参数.

parts.push('--' + boundary + '--rn');

data = new XBlob(parts);

fr = new FileReader();

fr.onload = function () { oldSend.call(oXHR, fr.result); };

fr.onerror = function (err) { throw err; };

fr.readAsArrayBuffer(data);

this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

XMLHttpRequest.prototype.send = oldSend;

}

else {

oldSend.call(this, val);

}

};

}

//把图片转成formdata 可以使用的数据...

//这里要把s替换掉..要不然atob的时候会出错....

function dataURLtoBlob(data) {

var tmp = data.split(',');

tmp[1] = tmp[1].replace(/s/g,'');

var binary = atob(tmp[1]);

var array = [];

for(var i = 0; i < binary.length; i++) {

array.push(binary.charCodeAt(i));

}

return new newBlob(new Uint8Array(array), 'image/jpeg');

}

function uploadFile(img){

var fd = needsFormDataShim ? new FormDataShim() : new FormData();

var file = dataURLtoBlob(img);

fd.append('img',file);

var prog = function(e){

/*你的逻辑*/

}

var load = function(e){

/*你的逻辑*/

}

var error = function(e){

/*你的逻辑*/

}

var abort = function(e){

/*你的逻辑*/

}

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress',prog,false);

xhr.addEventListener('load',load,false);

xhr.addEventListener('error',error,false);

xhr.addEventListener('abort',abort,false);

xhr.onreadystatechange = function(){

/*你的逻辑*/

}

xhr.open('POST','/upload',true);

xhr.send(fd);

}

更多信息请查看IT技术专栏