移动端图片上传: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
});
效果: