前面已经写了单张图片上传压缩的文章，这里简单拓展下多张图片的，思路还是一样的，只不过多了一些循环，所以不多赘述，直接贴代码。
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>如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。
多张图片上传并压缩
原文地址：http://www.cnblogs.com/wangzhenyu666/p/8110396.html