多张图片上传并压缩

注：本文的方法只是自己测试所写，具体项目中会有各种需求和兼容性问题，尤其移动端，建议使用插件或者原生提供方法

前面已经写了单张图片上传压缩的文章，这里简单拓展下多张图片的，思路还是一样的，只不过多了一些循环，所以不多赘述，直接贴代码。

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>
    var dataList = [];
    // ele 上传input按钮
    function imgUp(ele){
        var btnBox = document.getElementById('btnBox');
        // 获取fileList 需要注意的是fileList是一个类数组的对象
        var fileList = ele[0].files;

        var total = fileList.length + $('#imgBox1').children().length;
        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 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/png",0.9);
                                dataList.push(result);
                            };
                        }
                    };
            };
        }else{
            return false;
        }
        return dataList;
    };
    
    // 选择图片
    $('#imgFile').change(function(){
        imgUp($('#imgFile'));
    });
    var upBtn = document.getElementById('upBtn');
    // 上传按钮点击
    upBtn.onclick = function(){
        console.log(dataList);
        if($('#imgBox2').children().length == 0){
            for(var i in dataList){
                var img = $("<img src="+dataList[i]+" />")
                $("#imgBox2").append(img);
            }
        }else{
            $('#imgBox2').children("img").remove();
            for(var i in dataList){
                var img = $("<img src="+dataList[i]+" />")
                $("#imgBox2").append(img);
            }
        }
    };
</script>

 如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。