JS圖片多個上傳，並壓縮為Base64

首先是JS 批量上傳 

HTML 

 <div id="Pic_pass">
            <p style="font-size: 20px;font-weight: bold;">請上傳照片 </p>
            <p><span style="color: red">注：最多可以傳3張</span></p>
            <div class="picDiv">
                <div class="addImages">

                    <input type="file" class="file" id="fileInput" multiple="" accept="image/png, image/jpeg, image/gif, image/jpg">
                    <div class="text-detail">
                        <span>+</span>
                        <p>點擊上傳</p>
                    </div>
                </div>
            </div>
        </div>

　　 樣式

  .imageDiv {
            display:inline-block;
            width:160px;
            height:130px;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            border:1px dashed darkgray;
            background:#f8f8f8;
            position:relative;
            overflow:hidden;
            margin:10px
        }

        .cover {
            position:absolute;
            z-index:1;
            top:0;
            left:0;
            width:160px;
            height:130px;
            background-color:rgba(0,0,0,.3);
            display:none;
            line-height:125px;
            text-align:center;
            cursor:pointer;
        }
        .cover .delbtn {
            color:red;
            font-size:20px;
        }
        .imageDiv:hover .cover {
            display:block;
        }
        .addImages {
            display:inline-block;
            width:160px;
            height:130px;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            border:1px dashed darkgray;
            background:#f8f8f8;
            position:relative;
            overflow:hidden;
            margin:10px;
        }
        .text-detail {
            margin-top:40px;
            text-align:center;
        }
        .text-detail span {
            font-size:40px;
        }
        .file {
            position:absolute;
            top:0;
            left:0;
            width:160px;
            height:130px;
            opacity:0;
        }

　　JS代碼

   var userAgent = navigator.userAgent; //用於判斷瀏覽器類型

            $(".file").change(function () {
                //獲取選擇圖片的對象
                var cou = $('.imageDiv').length
                console.log(cou)
                var docObj = $(this)[0];
                var picDiv = $(this).parents(".picDiv");

                var fileList = docObj.files;
                console.log(fileList)
                console.log(fileList.length)
                console.log(picDiv)
                //循環遍歷
                for (var i = 0; i < fileList.length; i++) {
                    //動態添加html元素
                    var picHtml = "<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>刪除</i></div></div>";
                    picDiv.prepend(picHtml);
                    //獲取圖片imgi的對象
                    var imgObjPreview = document.getElementById("img" + fileList[i].name);
                    if (fileList && fileList[i]) {
                        formData.append("file", docObj.files[i]);
                        

                        //圖片屬性
                        imgObjPreview.style.display = 'block';
                        imgObjPreview.style.width = '160px';
                        imgObjPreview.style.height = '130px';
                        //imgObjPreview.src = docObj.files[0].getAsDataURL();
                        //火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要以下方式
                        if (userAgent.indexOf('MSIE') == -1) {
                            //IE以外瀏覽器
                            imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //獲取上傳圖片文件的物理路徑;
                            
                            console.log(docObj.files[i]);

                            // var msgHtml = '<input type="file" id="fileInput" multiple/>';
                        } else {
                            //IE瀏覽器
                            if (docObj.value.indexOf(",") != -1) {
                                var srcArr = docObj.value.split(",");
                                imgObjPreview.src = srcArr[i];
                                console.log(srcArr[i]);

                            } else {
                                imgObjPreview.src = docObj.value;
                            }
                        }
                    }


                }

               
                $('#fliei1').click(function () {
                    console.log($(".file").files)
                })

                /*刪除功能*/
                $(".delbtn").click(function () {
                    var _this = $(this);
                    _this.parents(".imageDiv").remove();
                });
            });
        })

　　效果

 

但是圖片都是沒有壓縮的 、

 

本來JS 是沒有辦法壓縮的 但是H5的畫布可以 可以用畫布壓縮 

   function dealImage(path, obj) {
            var img = new Image();
            img.src = path;
            img.onload = function () {
                var that = this;
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = 0.85; //壓縮質量 1是不壓縮
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                    quality = obj.quality;
                }
                var base64 = canvas.toDataURL('image/jpeg', quality);
                //最后返回壓縮后的base64編碼
                console.log(base64)
            }
        }









　　　　　　　　　　　　　　var imgReaderI = new FileReader();
　　　　　　　　　　　　　　　//轉換base64編碼
                        imgReaderI.readAsDataURL(docObj.files[i]);
                        console.log(imgReaderI)
                        var size=docObj.files[i].size
                        imgReaderI.onloadend = function (evt) {
                            //壓縮 
                                dealImage(this.result, { width: 180 });
                            }
                        }

有一點 docObj.files[i] 這個表示選擇的圖片可以傳到后台直接保存 但是沒有壓縮。

　　

 

1個1.9M 壓縮過后28.2K 還是特別客觀的 接下來 我們就可以吧這個字符串通過AJAX方式傳入后台。進行保存或者直接放入數據庫，下一篇 我會寫后台保存方法MVC 保存到服務器 返回相對路徑