如何在移动web上上传文件..

1、xmlhttprequest2.0可以支持文件上传.这东东很方便但是在实际使用中碰到了一些问题 这里记录下. 正常情况下我们是这样生成2进制文件的. /data为文件的base64编码 fun ctio n dataURLtoBlob(data) var tmp = data.split(,); tmp1 = tmp1.replace(/s/g,); var binary = atob(tmp1); var array =; for(var i = 0; i binary.len gth; i+) array.push(b in ary.charCodeAt(i); return new Bl

2、ob( new Uin t8Array(array), type: image/jpeg); 但是在an droid手机上可能会由于没有blob对象导致无法生成blob.怎么办捏.可以使用 以下代码： function n ewBlob(data, datatype) var out; try out = new Blob(data, type: datatype); /一切正常,直接使用blob. catch (e) wi ndow.BlobBuilder = wi ndow.BlobBuilder | wi ndow.WebKitBlobBuilder | wi ndow.MozBIobB

3、uilder | win dow.MSBlobBuilder; if (e. name = TypeError win dow.BlobBuilder) var bb = new BlobBuilder(); bb.appe nd(data.buffer); out = bb.getBlob(datatype); /还可以抢救一下.使用blobbuilder来生成文件. else /没救了 ,放弃治疗. return out; ok.现在文件已经ready 了. 我们创建一个formadata var file = dataURLtoBlob(img); fd.appe nd(img,file

4、); 愉快的上传然后然后没有然后了抓包看下 WebKitFormBoundarysToA VAYMLPFfJF96 Conten t-Dispositi on: form-data; n ame=img; file name=blob Conten t-Type: applicati on/o ctet-stream WebKitFormBoundarysToA VAYMLPFfJF96- 文件的内容呢 好吧.既然没法愉快用formdata.那么就自己动手生成一个post的包体吧下面是相关 的代码. fun ctio n FormDataShim () var o = this, parts

5、= ,/ Data to be sent bou ndary = Array(5).joi n(-) + 什new Date() * (1e16*Math.ra ndom().toStri ng(32), oldSe nd = XMLHttpRtotype.se nd; this.appe nd = fun cti on (n ame, value, file name) parts.push(- + boun dary + rnConten t-Dispositi on: form-data; n ame= + n ame + ); if (value in sta nc

6、eof Blob) parts.push(; file name=+ (file name | blob) +r nConten t-Type: + value.type + rnrn); parts.push(value); else parts.push(r nrn + value); parts.push(r n); ; /把xhr的send方法重写一下. XMLHttpRtotype.se nd = function (val) var fr, data, oXHR = this; if (val = o) /最后加一下boundary.注意这里一定要在最后加rn.

7、否则服务器有可能会解析参数失 败. parts.push(- + boun dary + -r n); data = new XBlob(parts); fr = new FileReader(); fr.o nl oad = fun ctio n () oldSe nd.call(oXHR, fr.result); ; fr.on error = function (err) throw err; ; fr.readAsArrayBuffer(data); / 设置 content-type this.setRequestHeader(C onten t-Type, multipart/fo

8、rm-data; boun dary= + boun dary); XMLHttpRtotype.se nd = oldSe nd; else oldSe nd.call(this, val); ; 最后完整的代码长这样 function n ewBlob(data, datatype var out; try out = new Blob(data, type: datatype); catch (e) wi ndow.BlobBuilder = wi ndow.BlobBuilder | wi ndow.WebKitBlobBuilder | wi ndow.MozBI

9、obBuilder | win dow.MSBIobBuilder; if (e. name = TypeError win dow.BlobBuilder) var bb = new BlobBuilder(); bb.appe nd(data.buffer); out = bb.getBlob(datatype); else if (e. name = In validStateError) out = new Blob(data, type: datatype); else return out; /判断是否需要blobbuilder var n eedsFormDataShim = (

10、function () var bCheck = n avigator.userAge nt. in dexOf(A ndroid) n avigator.ve ndor.i ndexOf(Google) = !n avigator.userAge nt.i ndexOf(Chrome); return bCheck navigator.userAgent.match(/AppleWebKit/(d+)/).pop() 534; )(), blobCo nstruct = !(fu nction () try return new Blob(); catch (e) )(), XBlob =

11、blobC on struct ? win dow.Blob : function (parts, opts) var bb = new (wi ndow.BlobBuilder |win dow.WebKitBlobBuilder win dow.MSBlobBuilder); parts.forEach(fu ncti on (p) bb.appe nd(p); ); retur n bb.getBlob(opts ? opts.type : un defi ned); ; fun ctio n FormDataShim () / Store a refere nee to this va

12、r o = this, parts = ,/ Data to be sent bou ndary = Array(5).joi n(-) + 什new Date() * (1e16*Math.ra ndom().toStri ng(32), oldSe nd = XMLHttpRtotype.se nd; this.appe nd = fun cti on (n ame, value, file name) parts.push(- + boun dary + rnConten t-Dispositi on: form-data; n ame= + n ame + ); i

13、f (value in sta nceof Blob) parts.push(; file name=+ (file name | blob) +r nConten t-Type: + value.type + rnrn); parts.push(value); else parts.push(r nrn + value); parts.push(r n); ; / Override XHR sen d() XMLHttpRtotype.se nd = function (val) var fr, data, oXHR = this; if (val = o) /注意不能漏

14、最后的rn ,否则有可能服务器解析不到参数. parts.push(- + boun dary + -r n); data = new XBlob(parts); fr = new FileReader(); fr.o nl oad = fun ctio n () oldSe nd.call(oXHR, fr.result); ; fr.on error = function (err) throw err; ; fr.readAsArrayBuffer(data); this.setRequestHeader(C onten t-Type, multipart/form-data; boun

15、 dary= + boun dary); XMLHttpRtotype.se nd = oldSe nd; else oldSe nd.call(this, val); ; 把图片转成formdata可以使用的数据. 这里要把s替换掉.要不然atob的时候会出错. fun ctio n dataURLtoBlob(data) var tmp = data.split(,); tmp1 = tmp1.replace(/s/g,); var binary = atob(tmp1); var array =; for(var i = 0; i binary.len gth; i+

16、) array.push(b in ary.charCodeAt(i); retur n new n ewBlob (new Uin t8Array(array), image/jpeg); function uploadFile(img) var fd = n eedsFormDataShim ? new FormDataShim() : new FormData(); var file = dataURLtoBlob(img); fd.appe nd(img,file); var prog = fun cti on( e) /*你的逻辑*/ var load = fun cti on( e) /*你的逻辑*/ var error = function( e) /*你的逻辑*/ var abort = function( e) /*你的逻辑*/ var xhr = new XMLHttpRequest(); xhr.upload.addEve ntListe