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': '请选择gif jpeg jpg文件', '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) { var o = new Image(); o.src = data; o.onload = function() { var w = o.width; var h = 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'); } });
二、裁剪最小宽高限制,裁剪选框形状和尺寸限制。
function jcropload(){ var minwidth = 130 * t; //最小宽:130px; var minheight = 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() { var bounds = 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'); }); } //裁剪效果图显示 function showCoords(c) { if (parseInt(c.w) > 0) { var rx = 100 / c.w; //根据裁剪选框宽高比例,在此调整效果图显示比例。下同 var ry = 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)重写,让点击事件触发区域与上传按钮重合。
四、裁剪上传完成后页面清除原图,显示默认底图,且默认底图不可裁剪。
//图片裁剪上传 function jcrop() { var img = $("#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(""); api.destroy(); $(".prodact_sc").hide(); $(".back_a").hide(); //图片裁剪并上传完毕之后清除 $("#img").attr("src", ""); $("#preview").attr("src", ""); } }); }else{ alert("请上传Logo"); } }
文章标题:JQuery上传插件Uploadify+Jcrop图像裁剪的几个常用小技巧
标题来源:http://scyanting.com/article/jjecgp.html