HTML5 Mobile Upload
2015-07-28 18:00
597 查看
HTML5移动端图片上传并前端预览
用到了HTML5的FileReader对象,主要思想是由于移动端的网络不比PC快,故需要做上传前预览,采用base64编码目前是比较好的方法。前端用FileReader获取图片并转为base64编码并<img>预览,上传到服务器由后台解码生成图片并保存到磁盘。
核心代码:
知识点:
1.使用HTML5的FileReader对象,把图片存在内存,读取e.target.result的base64编码,前端预览<img src="data:image/png;base64,iVBORw0KG==">
2.使用canvas画img,然后使用canvas的toDataURL方法进行转码成base64编码并压缩。把压缩后的base64赋给img src属性上。
3.把base64值传给后台,后台进行解码并保存为图片。
遇到的问题:
1.兼容性,拍照图片太大手机内存不够响应不过来,会刷新页面。我的手机(华为荣耀3C 移动4G),拍照默认最小为2592*1456,就出现这种问题。而用chrome,UC浏览器则无此问题。UC调手机照相机默认800*600;故加了图片大小限制及提示。
(注1:经测试,我这个项目一个页面上传6张图,而上传1-4张时则无此问题,猜想是拍照太多拍照进程未清除造成手机内存不足引起,不确定待讨论研究。)
(注2:调用摄像头拍照时,有以上问题,直接图库选图无此问题,图库选图过大的话只有上传太慢的不好体验)
2.canvas压缩问题,压缩后的base64码在PC上模拟无问题可以正常显示,而在手机上有些浏览器上则不显示图片。而chrome,UC浏览器无此问题。
(注:拍照,图库选图都未成功)
注意点:
1.上传完或base64使用完需设置为null,减少内存占用。
2.由于有多个上传,故每个上传时添加蒙层‘正在上传中..’作为提示,避免用户快速点击多次上传造成响应不过来。
3.添加图片大小验证控制,避免上传太大的图造成服务器响应过慢,一直Loading问题。(由于压缩不兼容问题,目前也只能这样做了,移动端不要上传太大的图,大小视服务器上传返回响应而定)
4.同一页面上传图片较多(此项目为6张图)容易引起以上问题出现。
有大神写的上传本地预览插件localResizeIMG也存在以上相关兼容问题,目前未找到能兼容所有移动端浏览器的完美方法。
插件地址:https://github.com/think2011/localResizeIMG3/
最后附上源码:
FileReader Demo
插件Demo
用到了HTML5的FileReader对象,主要思想是由于移动端的网络不比PC快,故需要做上传前预览,采用base64编码目前是比较好的方法。前端用FileReader获取图片并转为base64编码并<img>预览,上传到服务器由后台解码生成图片并保存到磁盘。
核心代码:
$('input[type=file]').change(function(){ /*文件上传loadding*/ $('#upload_loading').css('display','block'); var vtop=$("body").scrollTop()+120; $('.pop-loading').css('top',vtop); /*定义对象变量*/ var liObj=$(this).parent('a').parent('li'); var aObj=$(this).parent('a.cert-btn-blue-add'); var liidx=liObj.index(); var fileval=$(this).val(); var oFile=this.files[0]; /*文件格式验证*/ var fileval=$(this).val(); var suffix=fileval.substring(fileval.lastIndexOf('.')+1,fileval.length); if(suffix!='jpg' && suffix!='png' && suffix!='jpeg'){ alert('上传文件类型需为jpg、jpeg、png图片格式'); liObj.find('input[type=file]').val(''); $('#upload_loading').css('display','none'); return false; } /*文件大小验证限制*/ if(oFile.size>1024*512*1){ alert('图片超过512kb,请到PC端官网上传'); liObj.find('input[type=file]').val(''); $('#upload_loading').css('display','none'); return false; } /*图片预览及上传*/ setTimeout(function(){ var oReader = new FileReader(); oReader.onload = function(e){ var sBase64 = e.target.result; if(window.gIsAndroid && sBase64.indexOf("data:image/") != 0){ var sMime = sName.split(".").pop().toLowerCase(); sBase64 = sBase64.replace("base64,", "image/" + sMime + ";base64,"); } var src=sBase64; var img = new Image(); img.onload = function () { liObj.append(img); liObj.find('a.cert-arrow-del').show(); }; img.src = typeof src === 'string' ? src : URL.createObjectURL(src); /*压缩后重新图片赋值*/ //var obj = compress(img,70); //img.src=obj.newImageData; aObj.hide(); hasimgArr[liidx-1]=true; sBase64 = null; e.target.result=null; /*上传到服务器*/ $.ajax({ type:"POST", timeout:20000, url:"upfilehtml.do", data:{filebase64:src,size:src.length}, dataType: "json", success: function(data){ if(data.flag){ }else { alert('上传失败,建议到PC端官网上传'); liObj.find('img').remove(); liObj.find('a.cert-arrow-del').hide(); liObj.find('a.cert-btn-blue-add input').val(''); setTimeout(function(){ aObj.show(); },100); } $('#upload_loading').css('display','none'); src=null; } }); }; oReader.readAsDataURL(oFile); },500); });压缩代码(采用canvas画图再toDataURL转为图片base64编码),代码如下:
function compress(source_img_obj, quality, output_format) { var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); cvs.width = source_img_obj.width; cvs.height = source_img_obj.height; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100); return { "newImageData": newImageData }; }
知识点:
1.使用HTML5的FileReader对象,把图片存在内存,读取e.target.result的base64编码,前端预览<img src="data:image/png;base64,iVBORw0KG==">
2.使用canvas画img,然后使用canvas的toDataURL方法进行转码成base64编码并压缩。把压缩后的base64赋给img src属性上。
3.把base64值传给后台,后台进行解码并保存为图片。
遇到的问题:
1.兼容性,拍照图片太大手机内存不够响应不过来,会刷新页面。我的手机(华为荣耀3C 移动4G),拍照默认最小为2592*1456,就出现这种问题。而用chrome,UC浏览器则无此问题。UC调手机照相机默认800*600;故加了图片大小限制及提示。
(注1:经测试,我这个项目一个页面上传6张图,而上传1-4张时则无此问题,猜想是拍照太多拍照进程未清除造成手机内存不足引起,不确定待讨论研究。)
(注2:调用摄像头拍照时,有以上问题,直接图库选图无此问题,图库选图过大的话只有上传太慢的不好体验)
2.canvas压缩问题,压缩后的base64码在PC上模拟无问题可以正常显示,而在手机上有些浏览器上则不显示图片。而chrome,UC浏览器无此问题。
(注:拍照,图库选图都未成功)
注意点:
1.上传完或base64使用完需设置为null,减少内存占用。
2.由于有多个上传,故每个上传时添加蒙层‘正在上传中..’作为提示,避免用户快速点击多次上传造成响应不过来。
3.添加图片大小验证控制,避免上传太大的图造成服务器响应过慢,一直Loading问题。(由于压缩不兼容问题,目前也只能这样做了,移动端不要上传太大的图,大小视服务器上传返回响应而定)
4.同一页面上传图片较多(此项目为6张图)容易引起以上问题出现。
有大神写的上传本地预览插件localResizeIMG也存在以上相关兼容问题,目前未找到能兼容所有移动端浏览器的完美方法。
插件地址:https://github.com/think2011/localResizeIMG3/
最后附上源码:
FileReader Demo
插件Demo
相关文章推荐
- HTML5开发手机项目总结【很好】
- html5之使用地理定位
- HTML5+CSS3小结
- HTML5 新的API 窗口可视区 scrollIntoView dataset calssList
- HTML5简单进度环插件
- html5之canvas进阶
- RH5编译安装postfix
- 在HTML5的Canvas上绘制椭圆的几种方法(转)
- HTML5文档结构语义:页眉的header和hgroup标签使用
- html5桌面通知,notification的使用,右下角出现通知框
- html5全局属性
- HTML5 QQ登录背景动态图片
- HTML5基础 --- Canvas元素
- HTML5实现摇一摇
- 2015 年最棒的 5 个 HTML5 框架
- 【实例】HTML5中video播放视频实现特效
- 简单实用H5的FormData对象上传文件
- HTML5中表单验证的8种方法
- html5压缩图片并上传
- HTML5 自制本地网页视频播放器