HTML5 Mobile Upload

淡淡的烟草味﹌ 2022-08-03 00:28 136阅读 0赞

HTML5移动端图片上传并前端预览

用到了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编码），代码如下：

知识点：

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][localResizeIMG]**也存在以上相关兼容问题，目前未找到能兼容所有移动端浏览器的完美方法。

插件地址：https://github.com/think2011/localResizeIMG3/

最后附上源码：

[FileReader Demo][]

[插件Demo][Demo]

[localResizeIMG]: https://github.com/think2011/localResizeIMG
[FileReader Demo]: http://download.csdn.net/detail/u010730458/8940665
[Demo]: http://download.csdn.net/detail/u010730458/8940659