前面已经写了单张图片上传压缩的文章，这里简单拓展下多张图片的，思路还是一样的，只不过多了一些循环，所以不多赘述，直接贴代码。
dom结构如下：
<label for="imgFile">请上传图片：</label><input id="imgFile" type="file" multiple accept="image/jpeg,image/png,image/gif" /> <span id="progress"></span> <!-- 上传本地进度 --> <div id="imgBox1"></div> <!-- 展示用图片盒子 --> <div id="btnBox"> <button id="upBtn">上传</button> </div> <div id="imgBox2"></div> <!-- 展示myData用图片盒子 --> <canvas id="myCanvas"></canvas>
js代码如下：
<script src="js/jquery.min.js"></script>
<script>
// ele 上传input按钮
function imgUp(ele){
var dataList = [],btnBox = document.getElementById(‘btnBox‘);
// 获取fileList 需要注意的是fileList是一个类数组的对象
var fileList = ele[0].files;
if(fileList){
for(var i = 0,file;file = fileList[i];i++){
// 实例化fileReader对象
var reader = new FileReader();
// 调用readAsDataURL方法
reader.readAsDataURL(file);
reader.onload = function(e){
// 获取图片base64编码
var result = this.result;
// 给压缩前图片赋值src
var exImg =new Image();
exImg.src = result;
$("#imgBox1").append(exImg);
var total = fileList.length;
var now = $(‘#imgBox1‘).children().length;
$(‘#progress‘).html("当前进度："+now+‘/‘+total);
if(now == total){
$(‘#upBtn‘).css(‘display‘,‘block‘);
}
var img = new Image();
img.src = result;
// 获取上传图片的文件大小 kb
var imgSize = (e.total)/1024;
if(imgSize<1000){
dataList.push(result);
}else{
img.onload = function(){
// 图片原始尺寸，压缩后最大宽高，canvas宽高，尺寸压缩比例
var w = this.width,h = this.height,maxWidth = 800,maxHeight = 600,canW,canH,proportion;
// 判断图片尺寸是否大于限定尺寸
if(w>maxWidth||h>maxHeight){
if(w>h){
// 图片是宽大于高的
canW = maxWidth;
proportion = w/maxWidth;
canH = h/proportion;
}else if(w<h){
// 图片是宽大于高的
canH = maxHeight;
proportion = h/maxHeight;
canW = w/proportion;
}
}else{
canW = w;
canH = h;
};
canvas = document.getElementById(‘myCanvas‘),
ctx = canvas.getContext(‘2d‘);
canvas.width = canW;
canvas.height = canH;
ctx.drawImage(img, 0, 0, canW,canH);
var result = canvas.toDataURL("image/jpeg",0.9);
dataList.push(result);
};
}
};
};
}else{
return false;
}
return dataList;
};
var myData = [];
// 选择图片
$(‘#imgFile‘).change(function(){
myData = imgUp($(‘#imgFile‘));
});
var upBtn = document.getElementById(‘upBtn‘);
// 上传按钮点击
upBtn.onclick = function(){
console.log(myData);
for(var i in myData){
var img = $("<img src="+myData[i]+" />")
$("#imgBox2").append(img);
}
};
</script>
如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。