H5图片上传
来源:互联网 发布:wifi电话软件下载 编辑:程序博客网 时间:2024/06/05 05:54
js 移动端图片上传
针对网上移动端图片上传代码根据实际业务需求修改,可参考图片上传
移动端的图片上传个人感觉比PC端要简单(PC有万恶的IE),移动端主要的问题是一些Android机不兼容 不支持formdata上传blob,需要给这部分Android机打上补丁,但是从网上Duang下来的源码普遍都是一个模子出来的不知道大家是不是都能正常上传,反正我测试时的不行。于是和后台各种联调,在原来的代码上稍微修改了下。
/*** formdata 补丁, 给不支持formdata上传blob的android机打补丁* @constructor*/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('\r\n--' + boundary + '\r\nContent-Disposition: form-data; name="' + name + '"'); if (value instanceof Blob) { parts.push('; filename="'+ (filename || 'blob') +'"\r\nContent-Type: ' + value.type + '\r\n\r\n'); parts.push(value); } else { parts.push('\r\n\r\n' + value); } parts.push('\r\n'); }; //把xhr的send方法重写一下. XMLHttpRequest.prototype.send = function (val) { var fr, data, oXHR = this; if (val === o) { // 最后加一下boundary..注意这里一定要在最后和前面加\r\n..否则服务器有可能会解析参数失败.. parts.push("\r\n--"+boundary+"--\r\n"); data = getBlob(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); } }; }; /** * 获取formdata */ function getFormData(){ var isNeedShim = ~navigator.userAgent.indexOf('Android') && ~navigator.vendor.indexOf('Google') && !~navigator.userAgent.indexOf('Chrome') && navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534; return isNeedShim ? new formDataShim() : new window.FormData(); }; /** * 获取blob对象的兼容性写法 * @param data dataURLtoBlob处理过后的数据 * @param datatype * @returns {*} */ function getBlob(data, datatype){ var out; try { if(datatype){//带datatype参数的是正常机型获取blob out = new Blob([data], {type: datatype}); }else {//不带datatype参数是打补丁机型获取blob out = new Blob(data); } //一切正常,直接使用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 { alert('不支持文件上传机型!') } } return out; }; /** *@param(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 getBlob(new Uint8Array(array), 'image/jpeg'); }; /** *xhr请求 *@param(basestr) 图片database64 *@param(url) 上传地址 */ function upload(basestr,url){ var xhr = new XMLHttpRequest(); var formdata = getFormData(); var blob = dataURLtoBlob(basestr); formdata.append('file', blob); xhr.open('post', url); var timeout=30000; var timer = setTimeout(function(){ timeout = 0; xhr.abort();//请求中止 },timeout); xhr.onreadystatechange = function() { if(!timeout){ // 超时处理 } if(xhr.readyState == 4 && xhr.status == 200) { clearTimeout(timer);//取消等待的超时 var imagedata = JSON.parse(xhr.responseText); // 成功处理 } if(xhr.readyState == 4 && xhr.status == 404){ clearTimeout(timer);//取消等待的超时 // 接口404 } if(xhr.readyState == 4 && xhr.status == 500){ clearTimeout(timer);//取消等待的超时 // 接口500 } }; xhr.send(formdata); }
以上就是图片上传当然这个是没有做压缩处理的调用方法 upload(‘图片database64’,‘上传地址’)
阅读全文
0 0
- H5+ 图片压缩上传
- H5图片上传插件
- H5 FileReader 上传图片
- H5 图片压缩上传
- h5上传图片
- H5图片上传预览
- H5图片上传
- H5图片上传
- h5多图片上传
- H5图片压缩与上传
- webView支持H5上传图片
- H5页面上传图片控件
- H5 图片压缩上传解决方案
- H5图片压缩与上传
- H5利用FileReader上传图片
- H5拍照/图片上传js
- h5图片上传和压缩
- 移动端h5图片上传
- Algorithm-week3
- Deepin下python安装uwsgi报错: Python.h:没有那个文件或目录
- 2017.9.20 cheat 失败总结
- Java中如何比较浮点数是否相等
- Java中的switch-case语句
- H5图片上传
- Gensim源代码详解——utils(持续更新中)
- 移动端设计实践优化
- EL嵌套使用
- Android EditText实现字符过滤
- 《Python语言及其应用》读书笔记(10)之第11章并发和网络(关键词:并发/网络)
- 《deep learning》学习笔记(3)——概率与信息论
- SpringBoot JPA使用QueryDsl之gradle文件配置
- Please tell me who you are?