JavaScript图片压缩上传

最新推荐文章于 2024-09-21 23:30:38 发布

程序员老牛了laoliu

最新推荐文章于 2024-09-21 23:30:38 发布

阅读量885

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/liuxuli232/article/details/78859953

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用lrz.bundle.js库解决手机端高像素图片上传导致的服务器带宽压力及用户体验问题。通过具体步骤演示如何引入js文件、设置上传标签及编写压缩与上传代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

步骤：1、引入js文件

图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
}