<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;

        }

   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();

                });

            });

        })

   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 });

                            }

                        }