带裁剪的图片上传功能jquery插件
来源：互联网 发布：大庆58同城网络交易 编辑：程序博客网 时间：2024/06/10 15:49
实现图片上传及图片裁剪功能，时间比较仓促，目前只允许单图片有裁剪功能，其中图片裁剪用到了imgareaselect插件，其实前端是伪裁剪，将裁减坐标传递给后台处理，需后台配合，备份一下代码
插件下载地址：http://download.csdn.net/download/jylonger/10141917
/** * 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
阅读全文
0 0
- 带裁剪的图片上传功能jquery插件
- PHP Uploadify+jQuery.imgAreaSelect插件+AJAX 实现图片上传裁剪 仿微博头像上传功能
- PHP Uploadify+jQuery.imgAreaSelect插件+AJAX 实现图片上传裁剪 仿微博头像上传功能
- 上传图片裁剪处理-调用android系统自带的裁剪功能
- JQuery 图像裁剪插件Jcrop实现图片上传功能(mysql DB)
- jQuery图片裁剪插件
- jQuery带图片过滤功能的Masonry瀑布流插件
- ASP.NET使用Jcrop插件实现图片上传裁剪功能
- 几个jQuery的图片裁剪插件
- 利用jquery插件的图片剪切上传功能
- 基于jquery的imgAreaSelect.js插件+JAVA后台实现图片裁剪保存功能
- Angular 图片裁剪上传插件
- jQuery+PHP上传裁剪图片
- 带图片预览功能的图片上传
- jquery插件图片裁剪jcrop
- Android自带的裁剪图片功能操作方式
- JQuery-Jcrop插件裁剪头像，及头像的上传
- cropper js基于vue的图片裁剪上传功能。
- 关于宏中使用do{}while(0)的作用
- static const volatile
- 使用京东云免费云主机搭建CentOS
- springcloud(九)：配置中心和消息总线（配置中心终结版） 2017/05/26
- Gym 101623I
- 带裁剪的图片上传功能jquery插件
- Shiro整合Web项目及整合后的开发
- 闲谈一
- Collection 集合，迭代器，泛型
- springcloud(十)：服务网关zuul初级篇
- AutoBanner
- springcloud(七)：配置中心svn示例和refresh
- java通用工具类 ---获取目录文件大小
- 操作系统-动态内存分配算法
