H5图片预览、压缩、上传

目标实现：

　　1、选择图片， 前端预览效果

　　2、图片大于1.2M的时候， 对图片进行压缩

　　3、以表单的形式上传图片

　　4、图片删除

　　

预览效果图：

代码说明：

1、input:file选择图片

<!-- html部分 -->
<ul id="preview" class="clear">
    <li class="fl">
        <img src="/images/audition/icon_upload.png">
        <input id="fileImage" type="file" name="file[]" multiple />
        <div class="num">0/4</div>
    </li>
</ul>

var imgId = 0;  //图片id标志, 方便删除预览图片

/* 选择图片 */
function choosePic() {
    $('#fileImage').change(function() {
        var files = this.files,
            len = $('#preview').find('.pic').length;
        if (len + files.length > 4) {
            showTip('最多只能上传4张图片哦~');
            return;
        }
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if (file.type.indexOf("image") == 0) {
                if (file.size >= 1024 * 1024 * 3) {
                    showTip('图片大小过大，应小于3M');
                } else {
                    showPic(file); //图片预览
                }
            } else {
                showTip('文件"' + file.name + '"不是图片类型')
                break;
            }
        }
    });
}

2、图片预览（base64）

/* 渲染图片 */
function showPic(file) {
    var html = '',
        $wap = $('#preview'),
        reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        var image_base64 = this.result;

        html = '<li class="fl pic" id="imgItem_' + imgId + '">' +
                    '<img src="' + image_base64 + '" alt="">' +
                    '<i class="del-img"></i>' +
                '</li>';
        imgId++;
        $wap.append(html);
        $('#fileImage').next().text($wap.find('.pic').length + '/4');    

        //图片压缩上传，大于1.2M压缩图片
        if (file.size / 1024 > 1024 * 1.2) {
            dealImage(image_base64, {
                quality: 0.5
            }, function(base64Codes) {
                var bl = processData(base64Codes, file.type);
                uploadPic(bl, imgId);
            });
        } else {
            uploadPic(file, imgId);
        }
    }
}

3、图片压缩

/**
 * 图片压缩（利用canvas）
 * @param  path     图片路径
 * @param  obj      压缩配置width,height,quality，不传则按比例压缩
 * @param  callback  回调函数
 */
function dealImage(path, obj, callback) {
    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);

        //生成canvas
        var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        canvas.width = w;
        canvas.height = h;
        ctx.drawImage(that, 0, 0, w, h);

        // 默认图片质量为0.7
        var quality = 0.7;
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
        }

        // 回调函数返回base64的值
        var base64 = canvas.toDataURL('image/jpeg', quality);
        callback(base64);
    }
}

压缩后的文件是base64格式， 我们希望用file图片的形式上传

/* 将以base64的图片url数据转换为Blob */
function processData(dataUrl, type) {
    var binaryString = window.atob(dataUrl.split(',')[1]),
    arrayBuffer = new ArrayBuffer(binaryString.length),
    intArray = new Uint8Array(arrayBuffer);
    for (var i = 0, j = binaryString.length; i < j; i++) {
        intArray[i] = binaryString.charCodeAt(i);
    }

    var data = [intArray], blob;

    try {
        blob = new Blob(data);
    } catch (e) {
        window.BlobBuilder = window.BlobBuilder ||
            window.WebKitBlobBuilder ||
            window.MozBlobBuilder ||
            window.MSBlobBuilder;
        if (e.name === 'TypeError' && window.BlobBuilder) {
            var builder = new BlobBuilder();
            builder.append(arrayBuffer);
            blob = builder.getBlob(type);
        } else {
            showTip('版本过低，不支持图片压缩上传');
        }
    }
    return blob;
}

4、图片上传

/* 上传图片 */
function uploadPic(file, id) {
    var formData = new FormData();
    formData.append('img', file);
    $.ajax({
        url: '/upload',
        type: 'post',
        dataType: 'json',
        data: formData,
        contentType: false,
        processData: false,
        success: function(res){
            if(res.respCode == 1000) {
                $('#imgItem_' + id).find('.del-img').attr('data-src', res.data.src);
            }else {
                showTip('文件上传失败！');
            }
        }
    });
}

5、其他

function showTip(str) {
    //TODO:信息提示
    console.log(str);
}

/* 删除图片 */
function delPic() {
    var $wap = $('#preview');
    $wap.on('click', '.del-img', function() {
        //TODO:从数据库删除图片
        $(this).parent().remove();
        $('#fileImage').next().text($wap.find('.pic').length + '/4');
    });
}

源码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>前端图片预览压缩上传</title>
     <style>
         .clear::after {
           content: '';
           clear: both;
           display: block;
         }
         .fl {
             float: left;
         }
         .list-img li {
             position: relative;
             margin-right: 10px;
             list-style: none;
         }
         .list-img img {
             display: inline-block;
             width: 50px;
             height:50px;
         }
         .list-img input {
             position: absolute;
             top: 0;
             left: 0;
             z-index: 10;
             width: 50px;
             height:50px;
             opacity: 0;
         }
         .list-img i {
             position: absolute;
             top: 0;
             right: 0;
             width: 15px;
             height: 15px;
             background: url(../images/icon_del.png) no-repeat center;
             background-size: 100%;
         }
         .list-img .num {
             position: absolute;
             left: 0;
             bottom: 0;
             width: 100%;
             text-align: center;
             color: #999;
             font-size: 12px;
         }
     </style>
 </head>
 <body>
     <div class="list-img">
         <ul id="preview" class="clear">
             <li class="fl">
                 <img src="/images/icon_upload.png">
                 <input id="fileImage" type="file" name="file[]" multiple />
                 <div class="num">0/4</div>
             </li>
         </ul>
     </div>    

     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     <script>
         var pageCtrl = {
             imgId : 0, //图片id标志, 方便删除预览图片
             maxNum : 4, //最多上传图片张数

             /* 选择图片 */
             _choosePic : function() {
                 var _self = this;
                 $('#fileImage').change(function() {
                     var files = this.files,
                         len = $('#preview').find('.pic').length;
                     if (len + files.length > _self.maxNum) {
                         _self._showTip('最多只能上传' + _self.maxNum + '张图片哦~');
                         return;
                     }
                     for (var i = 0; i < files.length; i++) {
                         var file = files[i];
                         if (file.type.indexOf("image") == 0) {
                             if (file.size >= 1024 * 1024 * 3) {
                                 _self._showTip('图片大小过大，应小于3M');
                             } else {
                                 _self._showPic(file); //图片预览
                             }
                         } else {
                             _self._showTip('文件"' + file.name + '"不是图片类型')
                             break;
                         }
                     }
                 });
             },

             /* 渲染图片 */
             _showPic : function(file) {
                 var _self = this,
                     html = '',
                     $wap = $('#preview'),
                     reader = new FileReader();
                 reader.readAsDataURL(file);
                 reader.onload = function(e) {
                     var image_base64 = this.result,
                     imgId = _self.imgId;

                     html = '<li class="fl pic" id="imgItem_' + imgId + '">' +
                                 '<img src="' + image_base64 + '" alt="">' +
                                 '<i class="del-img"></i>' +
                             '</li>';
                     imgId++;
                     $wap.append(html);
                     $('#fileImage').next().text($wap.find('.pic').length + '/' + _self.maxNum);    

                     //图片压缩上传，大于1.2M压缩图片
                     if (file.size / 1024 > 1024 * 1.2) {
                         _self._dealImage(image_base64, {
                             quality: 0.5
                         }, function(base64Codes) {
                             var bl = _self._processData(base64Codes, file.type);
                             _self._uploadPic(bl, imgId);
                         });
                     } else {
                         _self._uploadPic(file, imgId);
                     }
                 }
             },

             /**
              * 图片压缩（利用canvas）
              * @param  path     图片路径
              * @param  obj      压缩配置width,height,quality，不传则按比例压缩
              * @param  callback  回调函数
              */
             _dealImage : function(path, obj, callback) {
                 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);

                     //生成canvas
                     var canvas = document.createElement('canvas'),
                     ctx = canvas.getContext('2d');
                     canvas.width = w;
                     canvas.height = h;
                     ctx.drawImage(that, 0, 0, w, h);

                     // 默认图片质量为0.7
                     var quality = 0.7;
                     if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                         quality = obj.quality;
                     }

                     // 回调函数返回base64的值
                     var base64 = canvas.toDataURL('image/jpeg', quality);
                     callback(base64);
                 }
             },

             /* 将以base64的图片url数据转换为Blob */
             _processData : function(dataUrl, type) {
                 var binaryString = window.atob(dataUrl.split(',')[1]),
                 arrayBuffer = new ArrayBuffer(binaryString.length),
                 intArray = new Uint8Array(arrayBuffer);
                 for (var i = 0, j = binaryString.length; i < j; i++) {
                     intArray[i] = binaryString.charCodeAt(i);
                 }

                 var data = [intArray], blob;

                 try {
                     blob = new Blob(data);
                 } catch (e) {
                     window.BlobBuilder = window.BlobBuilder ||
                         window.WebKitBlobBuilder ||
                         window.MozBlobBuilder ||
                         window.MSBlobBuilder;
                     if (e.name === 'TypeError' && window.BlobBuilder) {
                         var builder = new BlobBuilder();
                         builder.append(arrayBuffer);
                         blob = builder.getBlob(type);
                     } else {
                         _showTip('版本过低，不支持图片压缩上传');
                     }
                 }
                 return blob;
             },

             /* 上传图片 */
             _uploadPic : function(file, id) {
                 var _self = this,
                 formData = new FormData();
                 formData.append('img', file);
                 $.ajax({
                     url: '/upload',
                     type: 'post',
                     dataType: 'json',
                     data: formData,
                     contentType: false,
                     processData: false,
                     success: function(res){
                         if(res.respCode == 1000) {
                             $('#imgItem_' + id).find('.del-img').attr('data-src', res.data.src);
                         }else {
                             _self._showTip('文件上传失败！');
                         }
                     }
                 });
             },

             /* 删除图片 */
             _delPic : function() {
                 var _self = this,
                 $wap = $('#preview');
                 $wap.on('click', '.del-img', function() {
                     //TODO:从数据库删除图片
                     $(this).parent().remove();
                     $('#fileImage').next().text($wap.find('.pic').length + '/' + _self.maxNum);
                 });
             },

             _showTip : function(str) {
                 //TODO信息提示
                 console.log(str);
             },

             init: function() {
                 this._choosePic();
                 this._delPic();
             }
         };

         $(function() {
             pageCtrl.init();
         });
     </script>
 </body>
 </html>

 完整代码        

完整代码

参考文章：

https://www.cnblogs.com/007sx/p/7583202.html