Pro/public/static/admin/js/img_upload.js

// 图片上传
$(function() {

// 多图
Imgupload(".upload_file",".upload_btn_item","more",1);


});
function Imgupload(btn,uploadBox,Type,maxCount){
    // 允许上传的图片类型  
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    // 1024KB，也就是 1MB  
    var maxSize = 1024 * (1024*4);   //小于4MB
    // 图片最大宽度  
    var maxWidth = 10000;
    // 最大上传图片数量  
    var maxCount = maxCount||1;
    var imgArray=[];
    $(btn).on('change', function(event) {
        var files = event.target.files;
        $(uploadBox).addClass("login-img")
        // 如果没有选中文件，直接返回  
        if (files.length === 0) {
            $(uploadBox).removeClass("login-img")
            return;
        }
        if (files.length>maxCount) {
            $(uploadBox).removeClass("login-img")
            alert_box('最多只能上传' + maxCount + '张图片');
            return;
        };
        for (var i = 0, len = files.length; i < len; i++) {
            var file = files[i];

            var reader = new FileReader();
            // 如果类型不在允许的类型范围内  
            if (allowTypes.indexOf(file.type) === -1) {
                $(uploadBox).removeClass("login-img")
                alert_box("该类型不允许上传");
                continue;
            }
            if (file.size > maxSize) {
                $(uploadBox).removeClass("login-img")
                alert_box("图片太大，不允许上传");
                continue;
            }
           
            if ($('.item_file').length >= maxCount) {
                $(uploadBox).removeClass("login-img")
                alert_box('最多只能上传' + maxCount + '张图片');
                return;
            }
            reader.onload = function(e) {
                var img = new Image();
                img.onload = function() {
                    $(uploadBox).removeClass("login-img")
                    // 不要超出最大宽度  
                    var w = Math.min(maxWidth, img.width);
                    // 高度按比例计算  
                    var h = img.height * (w / img.width);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 设置 canvas 的宽度和高度  
                    canvas.width = w;
                    canvas.height = h;
                    ctx.drawImage(img, 0, 0, w, h);
                    // var base64 = canvas.toDataURL('image/png');

                    var base64 =canvas.toDataURL('image/jpeg',0.8);  

                    // 插入到预览区  
                    var progress = 0;
                    // 多图
                    //侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
                    function OnProgRess(event) {
                    var event = event || window.event;
                    // console.log("已经上传："+ event.loaded); //已经上传大小情况(已上传大小，上传完毕后就 等于 附件总大小)

                    var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比  
                    // console.log(loaded+"%"); 
                    if (Type=="more") {
                        $preview.find('.uploader_num').text(loaded + '%');
                    }else{
                       $(uploadBox).find('.uploader_num').text(loaded + '%');
                    }
                    };
                    if (Type=="more") {
                    var $preview = $('<li class="item_file uploader_bg" ><div class="uploader_num">0%</div></li>');
                    $('.img-box').append($preview);
                    var num = $('.item_file').length;
                    $('.num_counter').text(num + '/' + maxCount);
                        function depositupload(){
                             var data = {};
                             data.base64 = base64;
                             xhr = $.ajaxSettings.xhr(); 
                             $.ajax({
                                 type: 'post',
                                 url:'/recharge/deposit',
                                 dataType: 'json',
                                 async: true, 
                                 data: data,
                                 xhr: function() {
                                   if(OnProgRess && xhr.upload) {
                                      xhr.upload.addEventListener("progress", OnProgRess, false);
                                   return xhr;
                                   }
                                 },
                                 success: function(data) {
                                  var  Url='url(' +data.msg+ ')';
                                  $(".save .upload .img-box").find(".error").remove();
                                  $preview.css("background-image",Url);
                                  $('#img_url').val(data.msg);
                                  $preview.append('<i class="iconfont remove_btn">X</i><span class="preview-open"></span>');
                                  $preview.removeClass('uploader_bg').find('.uploader_num').remove();

                                 },
                                 error: function(msg) {
                                  alert_box("上传失败")
                                  $preview.removeClass('uploader_bg').find('.uploader_num').remove();
                                  $preview.html('<div class="error"></div>');
                                  $(".save .upload .img-box").on("click",".error",function(){
                                   return depositupload();
                                  })

                                 }
                             });
                         }
                         depositupload();

                    }
                    if (imgArray.length == maxCount) {
                    $(".upload_btn_item").css("display","none");
                 }
                };



                img.src = e.target.result;
                imgArray.push(img.src);  
            };
            reader.readAsDataURL(file);  
        }
        
    });
    // 删除图片
     if (Type=="more") {    
        $(".save .upload .img-box").on("click",".remove_btn",function(){
             var b= $(this).parents(".item_file").index()
                    imgArray.splice(b,1);
                    var num = $('.item_file').length-1;
                    $('.num_counter').text(num + '/' + maxCount);
                    if (imgArray.length < maxCount) {
                        $(".upload_btn_item").css("display","block");
                    }
                    $(this).parents(".item_file").remove();

                    // console.log(imgArray)

        })
        // 预览
        $(".save .upload .img-box").on("click",".preview-open",function(){
            var c= $(this).parents(".item_file").index();
            // console.log(imgArray[c])
            $("#preview-img").attr("src",imgArray[c])
            $(".preview").css("display","block");
        })
        $(".close_btn").click(function(){
            $(".preview").css("display","none");
            $("#preview-img").attr("src","");
        })
    }
}