解决input file上传图片，部分手机拍照或者本地图片无法上传（图片太大，需要上传之前先压缩）-CSDN博客

本文链接：https://blog.csdn.net/sunbeibei00000/article/details/118054999

这段代码展示了如何使用lrz.js库来压缩并上传图片。用户选择图片后，通过FileReader读取，然后利用lrz.js进行压缩，最后将压缩后的base64编码通过POST发送到服务器。

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

现在一般手机拍的照片都好几兆,图片文件太大会非常影响上传速度或者根本上传不上去，故上传图片前需要先进行压缩，这里使用的是lrz.js（lrz.js文件这里就不提供了）

<input type="file" style="display: none;" id="unloadBtn" accept="image/*" onchange="getImg(this)">
<a href="javascript:;" onclick="uploadImg()" id="result">
	<img src="images/uploading.png">
	<span id="resultImg" style="display: none;"></span>
</a>

	// 点击上传图片
	function uploadImg() {
		$("#unloadBtn").click()
	}
	function getImg() {
		layer.open({
			type: 2
			, content: '正在上传'
		})
		var file = document.getElementById("unloadBtn").files;
		var result = document.getElementById("result");
		for (i = 0; i < file.length; i++) {
			alert("d")
			var reader = new FileReader();
			reader.readAsDataURL(file[i]);
			reader.onload = function (e) {
				alert("压缩前base64长度：" + e.target.result.length);
				lrz(e.target.result, {
					width: 1000,
					height: 500,
					before: function () {
						alert('压缩开始');
					},
					fail: function (err) {
						alert(err);
					},
					always: function () {
						alert('压缩结束');
					},
					done: function (results) {
						var data = results.base64;
						alert("编码后base64长度：" + data.length);
						$.post(url + "file.ashx?m=base64&width=1000&height=500", {
							base64: data
						}, res => {
							layer.closeAll('loading');
							$("#result img").attr("src", data).addClass("resultImg")
							$("#resultImg").html(data)
						})
					}
				})

			}

		}
	}