JavaScript图片压缩上传

采用lrz.bundle.js进行图片压缩

场景：手机端上传的图片都是2M以上，我的手机像素很高通常在5M以上，有的甚至将近10M。这对服务器的带宽带来很大的压力。用户在使用过程中响应的时间长（用户会认为手机卡死）。

为了解决这一问题，我们需要先将图片压缩后再进行上传到服务器。

步骤：1、引入js文件

 <script src="js/lrz.bundle.js"></script>

图1

注意：lrz.bundle.js需要引入到页面中，图1中其他的js文件也需要放在与lrz.bundle.js相同的目录下。

如果没有其他的文件，兼容性会出现问题。本人曾经踩过这个坑。在PC端功能正常，手机浏览器功能也正常，但是从微信进入页面功能就

不好使了，查看lrz.bundle.js的源码发现在这个js文件中引用了其他的js。把另外的文件放到此目录后，微信端功能好使。

2、html上传文件标签代码

<input type="file" id="image" name="image">

3、js代码

$('#image').change(function(){
	layer.load(1, {
		shade : "#000"
	});
	var that = this;
	lrz(this.files[0])
		.then(function (rst) {
			//压缩之前的文件大小
			sourceSize = (that.files[0].size / 1024).toFixed(2);
			//压缩后的文件大小
			resultSize = (rst.fileLen / 1024).toFixed(2);
			//压缩率
			scale = parseInt(100 - (resultSize / sourceSize * 100));
			console.log('sourceSize:'+sourceSize+' resultSize:'+resultSize+' scale:'+scale); 
			console.log('压缩后大小为：'+resultSize+'K  压缩率：'+scale+'%');
			//上传方法
			uploadPositive(rst,rst.formData);  
			// 处理成功会执行
		})
		.catch(function (err) {
			console.log(err);
		});
});

//上传方法
function uploadPositive(rst, formData){
	if(!formData){
		formData = new FormData();
	}
	//将压缩后的文件放到FormData中
	formData.append("image", rst.file); 
	$.ajax({
		type : "POST",//提交类型  
		//dataType : "json",//返回结果格式  
		url : '/admin/uploadFile.html',//请求地址  
		async : true,
		processData : false, //当FormData在jquery中使用的时候需要设置此项
		contentType : false,//如果不加，后台会报表单未封装的错误(enctype='multipart/form-data' )
		//请求数据  
		data : formData,
		success : function(obj) {//请求成功后的函数 
			//上传成功后续处理
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			
		}
	}); // end of ajaxSubmit
}

4、后台方法自己写

参考地址：https://github.com/think2011/localResizeIMG.git