带裁剪的图片上传功能jquery插件

实现图片上传及图片裁剪功能，时间比较仓促，目前只允许单图片有裁剪功能，其中图片裁剪用到了imgareaselect插件，其实前端是伪裁剪，将裁减坐标传递给后台处理，需后台配合，备份一下代码

/**
 * Created by lgy on 2017/11/25.
 * 图片上传插件
 */
(function ($) {
    $.fn.esupload = function (options) {
        //初始化参数
        var defaults = {
            maxfilenum: 8,
            nowfilenum: 0,
            uploadurl: "", //上传图片路径
            cuturl:"",  //需裁剪的图片地址
            mid:"",
            cutshow:false,
            width:80,
            minheight:"",
            imgSize:500,  //以k为单位
            height:"",
            uploadimgurls: [],
            showallbtn: true
        };
        var opts = $.extend(defaults, options);
        return this.each(function () {
            var $this = $(this);//获取当前对象
            var html = '';
            if (opts.showallbtn) {
                html += '<div class="btn-upload"><span>批量上传</span><input type="file" class="btn-upload-input" name="allpic" multiple="' + opts.maxfilenum + '" ></div>' +
                    '<span> 最多允许上传' + opts.maxfilenum + '张图片</span><br><br>';
            }
            html += '<div style="clear: both;">';
            if(opts.mid!=""){
                if(opts.uploadimgurls.length>0){
                    var imgurls="";
                    for(var i=0;i<opts.uploadimgurls.length;i++){
                        imgurls+=opts.uploadimgurls[i]+",";
                    }
                    imgurls=imgurls.substring(0,imgurls.length-1);
                    html +='<input id='+opts.mid+' name="'+opts.mid+'" class="upload_img_name" type="hidden" value="'+imgurls+'">';
                }else{
                    html +='<input id='+opts.mid+' name="'+opts.mid+'" class="upload_img_name" type="hidden">';
                }
            }else{
                if(opts.uploadimgurls.length>0){
                    var imgurls="";
                    for(var i=0;i<opts.uploadimgurls.length;i++){
                        imgurls+=opts.uploadimgurls[i]+",";
                    }
                    imgurls=imgurls.substring(0,imgurls.length-1);
                    html +='<input name="upload_img_name" class="upload_img_name" type="hidden" value="'+imgurls+'">';
                }else{
                    html +='<input name="upload_img_name" class="upload_img_name" type="hidden">';
                }

            }

            html +='<div class="show-upload">' +
                '<div class="s-up-div">';
            if (opts.uploadimgurls.length > 0) {
                opts.nowfilenum = opts.uploadimgurls.length;
                $.each(opts.uploadimgurls, function (i, s) {
                    html += '<div class="s-up-wcon"><div class="s-up-k">' +
                        '<p class="s-up-img"><img src="' + s + '" width="100%"></p>' +
                        '</div>'+
                        '<span class="s-up-close"></span>' +
                        '<div class="s-cut-pic">裁剪图片</div></div>';
                });
            }
            html += '</div>';
            if (opts.uploadimgurls.length > 0 && opts.uploadimgurls.length>=opts.maxfilenum) {
                console.log("隐藏添加按钮");
                html +='<div class="s-up-wcon s-up-add" style="display:none;"><div class="s-up-k2">' +
                    '<span class="s-add-img"></span>' +
                    '<input type="file" class="btn-upload-input" name="imgFile" >' +
                    '</div></div>';
            }else{
                html +='<div class="s-up-wcon s-up-add"><div class="s-up-k2">' +
                    '<span class="s-add-img"></span>' +
                    '<input type="file" class="btn-upload-input" name="imgFile" >' +
                    '</div></div>';
            }

            html +='</div></div>';
            //加载图片截图功能html
            if(opts.cutshow){
                html+='<div class="imgAreaDiv">'+
                    '<div class="img-area-mask"></div><div class="img-area-k">' +
                    '<div class="img-area-title">' +
                    '<span>图片裁剪</span>' +
                    '<span class="img-area-close">X</span>' +
                    '</div>' +
                    '<div class="img-area-con">' +
                    '<div class="img-area-ys">' +
                    '<img class="img-before-photo-ys" style="display:none;"><img class="img-before-photo" src="">' +
                    '</div>' +
                    '<div class="img-area-cj">' +
                    '<div class="img-cj-txt">裁剪后图片预览</div>' +
                    '<div class="img-cj-con">' +
                    '<div class="img-after-photo img-cj-pic">' +
                    '<img src="">' +
                    '</div></div>' +
                    '</div></div>' +
                    '<div class="img-area-footer">' +
                    '<button type="button" class="img-area-pic">上传截图</button>' +
                    '</div></div></div>';
            }

            $this.html(html);


            if(opts.height=="auto"){
                $this.find(".s-up-k, .s-up-img").css({width:opts.width+"px",height:"auto"});
            }else{
                $this.find(".s-up-k, .s-up-img").css({width:opts.width+"px",height:opts.width+"px"});
            }
            if(opts.minheight!=""){
                $this.find(".s-up-k2").css({width:opts.minheight+"px",height:opts.minheight+"px"});
            }

            //删除事件
            delpic();
            //监听批量上传事件
            $(this).find('input[name="allpic"]').on('change', function () {
                if (typeof this.files == 'undefined') {
                    return;
                }
                $.each(this.files, function (i, f) {
                    pulicupload(f);
                });
            });
            //监听单图片上传事件
            $(this).find('input[name="imgFile"]').on('change', function () {
                if (typeof this.files == 'undefined') {
                    return;
                }
                pulicupload(this.files[0]);
                $(this).val("");
            });

            //上传图片公用方法
            function pulicupload(file) {
                if (opts.nowfilenum > opts.maxfilenum - 1) {
                    $this.find(".s-up-add").hide();
                    alert("最多只能上传" + opts.maxfilenum + "张图片");
                    return;
                }
                var img = file;//获取图片信息
                //console.log(img.size);
                if((img.size/1024)>opts.imgSize){
                    alert("上传图片不能大于" + opts.imgSize + "kb");
                    return;
                }
                //var imgtype = img.type;//获取图片类型，判断使用
                var url = getObjectURL(file);//使用自定义函数，获取图片本地url
                var fd = new FormData();//实例化表单，提交数据使用
                fd.append('imgFile', img);//将img追加进去
                fd.append('fileName', img.name);
                var imghtml = '<div class="s-up-wcon"><div class="s-up-k"><div class="s-up-loading"><span class="s-load-tb"></span></div>' +
                    '<p class="s-up-img"><img src="' + url + '" width="100%"></p>' +
                    '</div>'+
                    '<span class="s-up-close"></span>' +
                    '<div class="s-cut-pic">裁剪图片</div></div>';
                $this.find(".s-up-div").append(imghtml);


                //打开截图窗口
                $this.find(".s-cut-pic").unbind('click').click(function(){
                		$this.find(".img-cj-pic img").removeAttr("style");
                    var imgurl=$this.find(".upload_img_name").val();
                    console.log(imgurl)
                    $this.find(".img-before-photo-ys").attr("src",imgurl);
                    $this.find(".img-before-photo").attr("src",imgurl);
                    $this.find(".img-after-photo img").attr("src",imgurl);
                    $this.find(".imgAreaDiv").show();
                    $this.find('.img-before-photo').imgAreaSelect({
                        aspectRatio:"1:1",
                        handles: true,
                        autoHide:true,
                        onSelectEnd: preview
                    });
                    //截图事件
                    function preview(img, selection) {
                        console.log(selection);
                        if (!selection.width || !selection.height)
                            return;
                        var scaleX = 150 / selection.width;
                        var scaleY = 150 / selection.height;
                        var hei = $this.find('.img-before-photo').height();
                        var wid = $this.find('.img-before-photo').width();
                        //console.log(scaleX+"|"+scaleY+"|"+hei+"|"+wid)
                        $this.find('.img-after-photo img').css({
                            width: Math.round(scaleX * wid),
                            height: Math.round(scaleY * hei),
                            marginLeft: -Math.round(scaleX * selection.x1),
                            marginTop: -Math.round(scaleY * selection.y1)
                        });
                        //上传截图事件
                        $this.find('.img-area-pic').unbind('click').click(function(){
                            var cm=$this.find(".img-before-photo-ys").width()/300;
                            $.ajax({
                                type: 'post',
                                url: opts.cuturl,
                                data: {
                                    srcPath:img.src,
                                    x:parseInt(selection.x1*cm),
                                    y:parseInt(selection.y1*cm),
                                    width:parseInt(selection.width*cm),
                                    height:parseInt(selection.height*cm)
                                },
                                dataType: 'json',
                                success: function (data) {
                                    console.log(data)
                                    if(data.code==1000){
                                        $this.find(".upload_img_name").val(data.datas.fileName);
                                        $this.find(".s-up-img img").attr("src",data.datas.fileName);
                                        $this.find(".imgAreaDiv").hide();
                                    }
                                }
                            })
                        });
                    }
                    //关闭截图窗口
                    $this.find(".img-area-close").click(function(){
                        $this.find(".imgAreaDiv").hide();
                    });
                });

                if(opts.height=="auto"){
                    $this.find(".s-up-k, .s-up-img").css({width:opts.width+"px",height:"auto"});
                }else{
                    $this.find(".s-up-k, .s-up-img").css({width:opts.width+"px",height:opts.width+"px"});
                }
                if(opts.minheight!=""){
                    $this.find(".s-up-k2").css({width:opts.minheight+"px",height:opts.minheight+"px"});
                }
                //删除事件
                delpic();
                //开始上传图片
                uploadpic(fd,$this.find(".s-up-wcon"));
                //上传成功后清空文件栏
                opts.nowfilenum = opts.nowfilenum + 1;
                if (opts.nowfilenum >= opts.maxfilenum) {
                    $this.find(".s-up-add").hide();
                }
            }

            //自定义获取图片路径函数
            function getObjectURL(file) {
                var url = null;
                if (window.navigator.userAgent.indexOf("Chrome") >= -1 || window.navigator.userAgent.indexOf("Safari") >= -1) {
                    url = window.webkitURL.createObjectURL(file);
                }
                else {
                    url = window.URL.createObjectURL(file);
                }
                return url;
            }

            //删除图片事件
            function delpic() {
                //删除图片按钮鼠标滑过事件
                $this.find(".s-up-wcon").hover(function () {
                    $(this).find(".s-up-close").show();
                }, function () {
                    $(this).find(".s-up-close").hide();
                });
                //删除图片按钮点击事件
                $this.find(".s-up-close").unbind('click').on("click", function () {
                    console.log($(this).parent().index());
                    var curindex=$(this).parent().index();
                    $(this).parent().remove();
                    opts.nowfilenum = opts.nowfilenum - 1;
                    $this.find(".s-up-add").show();
                    opts.uploadimgurls.splice(curindex,1);
                    $this.find(".upload_img_name").val(opts.uploadimgurls);
                });
            }

            //上传图片功能
            function uploadpic(fd,curdiv) {
                //开始ajax请求，后台用的tp
                $.ajax({
                    type: 'post',
                    url: opts.uploadurl,
                    data: fd,
                    processData: false,  // tell jQuery not to process the data  ，这个是必须的，否则会报错
                    contentType: false,   // tell jQuery not to set contentType
                    dataType: 'json',
                    xhr: function () {//这个是重点，获取到原始的xhr对象，进而绑定upload.onprogress
                        var xhr = $.ajaxSettings.xhr();
                        console.log(xhr);
                        console.log(xhr.response);
                        xhr.upload.onprogress = function (ev) {
                            //这边开始计算百分比
                            var parcent = 0;
                            if (ev.lengthComputable) {
                                percent = 100 * ev.loaded / ev.total;
                                percent = parseFloat(percent).toFixed(2);
                                console.log(percent)
                                //$('.bgpro').css('width',percent + '%').html(percent + '%');
                            }
                        };
                        return xhr;
                    },
                    success: function (data) {
                        console.log(data);
                        if(data.fileResult==1){
                            opts.uploadimgurls.push(data.fileName);
                            //$this.attr("cur_pic_url",data);
                            if(opts.cutshow && opts.maxfilenum==1){
                                curdiv.find(".s-cut-pic").show();
                            }
                            curdiv.find(".s-up-loading").hide();
                            $this.find(".upload_img_name").val(opts.uploadimgurls);
                        }else{
                            alert("上传失败");
                        }

                    }
                });
            }
        });
    };
})(jQuery);

css部分：

body{
    font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei";
    margin: 0;
    padding: 0;
}
p{
    padding: 0;
    margin: 0;
}
.btn-upload{
    position: relative;
    font-size: 12px;
    padding: 5px 15px;
    background-color: #2c8aec;
    display: inline-block;
    color: #fff;
}
.btn-upload-input{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.controls input.btn-upload-input{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.show-upload{

}
.s-up-k{
    position: relative;
    padding: 0;
    width: 80px;
    height: 80px;
    overflow:hidden;
    background-color: #fff;
    border: 1px solid #ddd;
}
.s-up-k input{
    height:100%;
}
.s-up-loading{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color: rgba(0,0,0,0.5);
}
.s-load-tb{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../img/loading.gif);
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -15px;
    z-index: 4;

}
.s-up-k2{
    position: relative;
    padding: 0;
    width: 80px;
    height: 80px;
    overflow:hidden;
    background-color: #fff;
    border: 1px solid #ddd;
}
.s-up-k2 input{
    height:100%;
}
.s-up-img{
    display:flex;
    align-items: center;
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.s-up-close{
    position: absolute;
    display: none;
    right:-10px;
    top:-10px;
    width: 20px;
    height: 20px;
    background-image: url("../img/new_06.png");
    background-size: contain;
    background-position: center;
}
.s-up-add{
    position: relative;
    text-align: center;
}
.s-add-img{
    position: absolute;
    width: 26px;
    height: 25px;
    top: 50%;
    margin-left: -13px;
    margin-top: -13px;
    left: 50%;
    display: inline-block;
    background-image: url("../img/new_03.png");
}
.s-up-wcon{
    position: relative;
    float: left;
    margin-right: 15px;
    display: inline-block;
    margin-bottom: 10px;
}
.gg-attr-img{
    margin-top: 5px;
}
.s-cut-pic{
	display:none;
    width: 100%;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #e78b24;
    cursor: pointer;
}

/*裁剪图片样式*/
.imgAreaDiv{
    display: none;
}
.img-area-mask{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #ccc;
    opacity:0.5;
    z-index: 98;
}
.img-area-k{
    position: fixed;
    width: 600px;
    height: 410px;
    top:50%;
    margin-top: -220px;
    left: 50%;
    margin-left: -300px;
    border: 1px solid #ddd;
    background-color: #fff;
    z-index: 99;
}
.imgAreaDiv img{
	max-width: none;
}
    
.img-area-title{
    position: relative;
    border-bottom: 1px solid #ddd;
    line-height: 35px;
    color: #fff;
    background-color: #e78b24;
    padding-left: 10px;
    font-size: 14px;
}
.img-area-close{
    position: absolute;
    display: none;
    right: 0;
    top:0;
    cursor:pointer;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.img-area-con{
    display: flex;
    height: 325px;
}
.img-area-ys{
	padding-top: 10px;
    width: 350px;
    height: 325px;
    text-align: center;
    overflow: auto;
    border-right:1px solid #ddd;
}
.img-area-ys img{
}
.img-area-cj{
    width: 250px;
}
.img-cj-txt{
    width: 100%;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
.img-cj-con{
    width: 100%;
    text-align: center;
}
.img-before-photo{
	width:300px;
}
.img-cj-pic{
    margin: 20px auto 0 auto;
    width: 150px;
    height:150px;
    overflow: hidden;
}
.img-cj-pic img{
	 width: 150px;
    height:150px;
}
.img-area-pic{
    padding: 5px 10px;
    font-size: 14px;
    float: right;
    margin-top: 2px;
    margin-right: 10px;
    border: 1px solid #ddd;
    background-color: #e78b24;
    color: #fff;
}
.img-area-footer{
    height: 30px;
    border-top:1px solid #ddd;
}

插件下载地址：http://download.csdn.net/download/jylonger/10141917