JQuery上传插件Uploadify + Jcrop图像裁剪的几个常用小技巧
一、限制上传大小、图片尺寸
$('#select').uploadify({'swf':'/plugin/uploadify/uploadify.swf','uploader':'/work/p_w_picpathUploadServlet.up','formData':{'operateType':'activity.product'},'method':'get','cancelImg':'/plugin/uploadify/cancel.png','auto':true,'multi':false,'fileTypeDesc':'请选择gifjpegjpg文件','fileTypeExts':'*.gif;*.jpeg;*.jpg;*.png','sizeLimit':1000*1024,'height':19,'width':60,'buttonImage':'/p_w_picpaths/senior.png','buttonText':'上传图片','onSelect':function(file){if(file.size>5120*1024){//限制上传文件大小为5M以内alert("上传大小不能超过5M哦~");$('#select').uploadify('cancel');}},'onUploadSuccess':function(file,data,response){varo=newImage();o.src=data;o.onload=function(){varw=o.width;varh=o.height;if(w>=130&&h>=130){api.destroy();$("#img").removeAttr("style");$("#img").attr("src",data);$("#preview").attr("src",data);}else{alert("图片尺寸需大于130*130");$('#select').uploadify('cancel');}}},'onError':function(event,queueID,fileObj){alert("error!"+event);$('#uploadifyIndex').uploadify('cancel');}});
二、裁剪最小宽高限制,裁剪选框形状和尺寸限制。
functionjcropload(){varminwidth=130*t;//最小宽:130px;varminheight=130*t;//最小高:130px;$("#img").Jcrop({boxWidth:width,boxHight:height,bgColor:'black',bgOpacity:0.5,addClass:'jcrop-light',onChange:showCoords,onSelect:showCoords,onRelease:clearCoords,boundary:5,aspectRatio:1,//裁剪比例:1为正方形、3/5为长方形等等minSize:[minwidth,minheight]//控制裁剪选框的最小裁剪尺寸},function(){varbounds=this.getBounds();boundx=bounds[0];boundy=bounds[1];api=this;//调整裁剪选框的显示尺寸api.setSelect([width/2-60,height/2-60,width/2+60,height/2+60]);api.setOptions({bgFade:true});api.ui.selection.addClass('jcrop-selection');});}//裁剪效果图显示functionshowCoords(c){if(parseInt(c.w)>0){varrx=100/c.w;//根据裁剪选框宽高比例,在此调整效果图显示比例。下同varry=100/c.h;$("#preview").css({width:Math.round(rx*boundx)+"px",height:Math.round(ry*boundy)+"px",marginLeft:"-"+Math.round(rx*c.x)+"px",marginTop:"-"+Math.round(ry*c.y)+"px"});};$('#x1').val(Math.round(c.x));$('#y1').val(Math.round(c.y));$('#x2').val(Math.round(c.x2));$('#y2').val(Math.round(c.y2));$('#w').val(Math.round(c.w));$('#h').val(Math.round(c.h));};
三、上传按钮样式(swfupload)重写,让点击事件触发区域与上传按钮重合。
<styletype="text/css">/*弹出层上传按钮样式*/.swfupload{position:absolute;left:80px;top:16px};</style>
四、裁剪上传完成后页面清除原图,显示默认底图,且默认底图不可裁剪。
//图片裁剪上传functionjcrop(){varimg=$("#img").attr("src");if(img!="/p_w_picpaths/no_logo_pic.jpg"&&img!=""){$.ajax({type:"post",url:"/work/jcrop.up",dataType:"text",data:{"x":Math.ceil($('#x1').val()/t),"y":Math.ceil($('#y1').val()/t),"w":Math.ceil($('#w').val()/t),"h":Math.ceil($('#h').val()/t),"srcPath":$("#img").attr("src"),"tarPath":"activity.product"},success:function(data,textStatus){$("#yt_img").attr("src",data);$("#activityImg").val(data);$("#p_w_picpaths").append("<li><imgsrc='"+data+"'/></li>");api.destroy();$(".prodact_sc").hide();$(".back_a").hide();//图片裁剪并上传完毕之后清除$("#img").attr("src","");$("#preview").attr("src","");}});}else{alert("请上传Logo");}}<imgid="img"src="/p_w_picpaths/no_logo_pic.jpg"onload="ImgAuto(this,432,249);"onerror="this.src='/p_w_picpaths/no_logo_pic.jpg'"/><imgsrc="/p_w_picpaths/no_logo_pic.jpg"id="preview"onerror="this.src='/p_w_picpaths/no_logo_pic.jpg'"/>
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。