多張圖片上傳並壓縮

注：本文的方法只是自己測試所寫，具體項目中會有各種需求和兼容性問題，尤其移動端，建議使用插件或者原生提供方法

前面已經寫了單張圖片上傳壓縮的文章，這里簡單拓展下多張圖片的，思路還是一樣的，只不過多了一些循環，所以不多贅述，直接貼代碼。

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>

 如有表述不准確之處，歡迎指正，歡迎補充，感謝閱讀。