解决input file上传图片,部分手机拍照或者本地图片无法上传(图片太大,需要上传之前先压缩)

这段代码展示了如何使用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)
						})
					}
				})

			}

		}
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

罗倩楠_666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值