HTML5 Mobile Upload

HTML5移动端图片上传

用到了HTML5的FileReader对象，主要思想是前端用FileReader获取图片并转为base64编码并预览，上传到服务器由后台解码生成图片并保存到磁盘。

核心代码：

 

$('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.兼容性，拍照图片太大手机内存不够响应不过来，会刷新页面。我的手机（华为荣耀3C 移动4G），拍照默认最小为2592*1456，就出现这种问题。而用chrome,UC浏览器则无此问题。UC调手机照相机默认800*600；故加了图片大小限制及提示。

2.压缩问题，压缩后在PC上模拟无问题可以正常显示，而在手机上则不显示图片。而chrome,UC浏览器无此问题。

 

有大神写的上传本地预览插件也存在此问题，目前未找到能兼容所有移动端浏览器的完美方法。

 

 

最后附上源码：

FileReader Demo

插件Demo