上传图片并压缩

之前帮后端写了一个上传图片的方法，一直在本地放着，现在放出来给各位参考！

话不多说直接上代码！！

首先是html代码，可以使用循环进行多张上传，自己作一下处理就行。

<div class="fileinp">
        <div class="upload">车左前方45度图片</div>
        <div class="uld">
            <div class="hide">
                <input type="file" id="file-up" onchange="file(event)" class="file-up" title="">
                <img class="instruction" id="instruction" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2796968061,631869099&fm=26&gp=0.jpg" alt="">
            </div>
            <img class="instruction-pic" id="instruction-pic" src="" alt="">
            <img class="del" id="del" src="./img/1572853206(1).jpg" alt="">
        </div>
    </div>

下面是js代码：

 function file (e) {
   var files = e.target.files[0];
   if (files && files.size) { 
       var size = files.size / 1000 / 1024;
       console.log(size);
       // 如果图片大于2M则重新上传，这里e.target.files[0].size单位是b
    //    if (size > 2) {
    //        alert('图片太大,请重新上传');
    //        return; 
    //    }
       // 如果上传的不是图片格式，提示请选择图片
       var rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
       if (!rFilter.test(files.type)) {
           alert('请选择图片格式!');
           return;
       }
       var reader = new FileReader();
       reader.readAsDataURL(files);
       reader.onloadstart = function () {
           console.log('图片正在上传处理......');
       };
       //操作完成
       reader.onload = function(e) {
           suofang(reader.result, 3, returnBase)
           function returnBase (blob, Base) {
                console.log(Base, blob);
                $('.hide').hide()
                $('.del').show()
                $('.instruction-pic').show()
                // file 对象的属性
                $('.instruction-pic').attr('src', Base);
                document.getElementById('file-up').value = null;
           }
           
       };
   }
}
function suofang (base64, bili, callback) {
                console.log("执行缩放程序,bili=" + bili);
                //处理缩放，转格式
                var _img = new Image();
                _img.src = base64;
                _img.onload = function() {
                    var _canvas = document.createElement("canvas");
                    var w = this.width / bili;
                    var h = this.height / bili;
                    _canvas.setAttribute("width", w);
                    _canvas.setAttribute("height", h);
                    _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
                    var base64 = _canvas.toDataURL("image/jpeg");
                    _canvas.toBlob(function(blob) {
                        console.log(blob.size);
                        if(blob.size > 1024*1024){
                            suofang(base64, bili, callback);
                        }else{
                            callback(blob, base64);
                        }
                    }, "image/jpeg");
                }
            }
$('#del').on('click', function(e) {
        console.log(666);
        $('.hide').show();
           $('.instruction-pic').attr('src', '');
        $('.instruction-pic').hide();
        $('.del').hide()
    })

支持删除，重新上传，选择完图片会自动压缩，压缩的原理采用的是缩放。

下面是html代码：

* {
    margin: 0;
    padding: 0;
    outline: none;
}
.fileinp {
     100%;
    text-align: center;
}
.uld {
     100%;
    position: relative;
    height: 300px;
}
.file-up {
    position: absolute;
    top: 0;
    left: 0;
     100%;
    height: 300px;
    cursor: pointer;
    opacity: 0;
}
img {
     300px;
    height: 300px;
}
.instruction-pic {
    border: 1px solid #000;
    display: none;
}
.del {
    position: absolute;
    top: 0px;
    z-index: 99;
    left: 60%;
    display: none;
     30px;
    height: 30px;
}

代码中采用了jq的选择方法，可以引用jquery，也可以改成原生方法，谢谢！！！