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