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 保存到服务器 返回相对路径