利用JS来进行多张图片的压缩、预览、上传

前言

最近在做的项目里有个关于多图片上传的，搞得我很久，查了很多资料，终于搞定，故此写一篇总结。

代码

前台我用的是jquery-1.8.3.min.js
html：

<div id="inputBox"><input type="file" title="请选择图片" id="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG" onchange="addPhoto()"/>点击选择图片</div>
<div id="imgBox"></div>

js：
因为上传的图片要求不限制大小，就用了canvas压缩，再将base64转换为file放入文件流imgFile字段中，涉及到IE兼容问题就用了先将base64转换为blob再将blob转换为file。其中addNewContent方法实现预览效果，删除方法中的ajax会在下文提及。

var imgSrc = []; //图片路径
var imgFile = []; //文件流
var imgName = []; //图片名字
//压缩图片方法
    function compressImg(file){
   
        var src;
        var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);
        var read = new FileReader();
        read.readAsDataURL(file);
        read.onload = function (e) {
   
            var img = new Image();
            img.src = e.target.result;
            img.onload = function(){
   
                //默认按比例压缩
                var w = this.width,
                    h = this.height;
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var base64;
                // 创建属性节点
                canvas.setAttribute("width", w);
                canvas.setAttribute("height", h);
                ctx.drawImage(this, 0, 0, w, h);
                if(fileSize<1){
   
                    console.log("1");
                    //如果图片小于一兆 那么不执行压缩操作
                    base64 = canvas.toDataURL(file['type'], 1);
                }else if(fileSize>1&&fileSize<2){
   
                    console.log("0.5");
                    //如果图片大于1M并且小于2M 那么压缩0.5
                    base64 = canvas.toDataURL(file['type'], 0.5);
                }else{
   
                    console.log("0.2");
                    //如果图片超过2m 那么压缩0.2
                    base64 = canvas.toDataURL(file['type'], 0.2);
                }
                // 回调函数返回file的值
                // callback(base64);
                var