JQuery上传插件Uploadify

一、限制上传大小、图片尺寸

    $('#select').uploadify({        'swf': '/plugin/uploadify/uploadify.swf',        'uploader': '/work/imageUploadServlet.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': '/images/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）重写，让点击事件触发区域与上传按钮重合。

<style type="text/css">	  /*弹出层上传按钮样式*/	  .swfupload{position:absolute;left:80px;top:16px}；</style>

四、裁剪上传完成后页面清除原图，显示默认底图，且默认底图不可裁剪。

//图片裁剪上传function jcrop() {	var img = $("#img").attr("src");	if(img!="/images/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);	        	$("#images").append("<li><img src='"+data+"' /></li>");	        	api.destroy();			$(".prodact_sc").hide();			$(".back_a").hide();			//图片裁剪并上传完毕之后清除			$("#img").attr("src", "");		        $("#preview").attr("src", "");	        }	    });    }else{		alert("请上传Logo");	}}<img id="img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/no_logo_pic.jpg" onload="ImgAuto(this,432,249);" onerror="this.src='/images/no_logo_pic.jpg'" /><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/no_logo_pic.jpg" id="preview"onerror="this.src='/images/no_logo_pic.jpg'" />