移动端图片上传:localResizeIMG先压缩再ajax上传

移动端图片上传:localResizeIMG先压缩再ajax上传

 

下载https://github.com/think2011/localResizeIMG/archive/4.9.35.zip，之后引入以下几个js文件以及jquery.js

1.html

<div class="feedback">
	<div class="mui-col-xs-12 mui-text-center">

		<h3 style="margin: 25px;">上传图片测试</h3>

		<div id="image-list" class="row image-list"></div>

	</div>
</div>

2.js

var customArr = [{
	name: "IdCodeFront",
	text: "身份证正面",
	value: "1"
}, {
	name: "IdCodeBack",
	text: "身份证反面",
	value: "2"
}];
$(function() {
	var str = "";
	for(var i = 0; i < customArr.length; i++) {
		str += ("<div class=\'image-item space\'>");
		str += ("	<div class=\'image-close close-" + customArr[i].value + "\'>×</div>");
		str += ("	<div class=\'customText\'>" + customArr[i].text + "</div>");
		str += ("	<input type=\'file\' accept=\'image/*\' id=\'image-" + customArr[i].value + "\'>");
		str += ("</div>");
	}
	$("#image-list").html(str);
	init();
})

function init() {
	$('#image-list').on('change', 'input[type=file]', function() {
		var that = this;
		lrz(that.files[0], {
				width: 640
			})
			.then(function(rst) {
//ajax上传
				$(that).parent().css("background-image", "url(" + rst.base64 + ")").removeClass("space");

			})
			.catch(function(err) {

			})
			.always(function() {

			});
	});
	$('#image-list').on('click', '.image-close', function() {
		var that = this;
		$(that).parent().css("background-image", "").addClass("space");
	})
}

其中可以设置参数：

lrz(file, {
    width:640,//图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
    height:640,//参考宽度
    quality :0.7,//图片压缩质量，取值 0 - 1，默认为0.7
    fieldName:file//后端接收的字段名，默认：file
});

效果：