JQuery上傳插件Uploadify+Jcrop圖像裁剪的幾個(gè)常用小技巧

一、限制上傳大小、圖片尺寸

站在用戶的角度思考問題，與客戶深入溝通，找到湘鄉(xiāng)網(wǎng)站設(shè)計(jì)與湘鄉(xiāng)網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋湘鄉(xiāng)地區(qū)。

    $('#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': '請(qǐng)選擇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以內(nèi)
               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為長(zhǎng)方形等等
		minSize: [minwidth, minheight]         // 控制裁剪選框的最小裁剪尺寸
	    },
	    function() {
		var bounds = this.getBounds();
		boundx = bounds[0];
		boundy = bounds[1];
		api = this;
		// 調(diào)整裁剪選框的顯示尺寸
		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;  //根據(jù)裁剪選框?qū)捀弑壤?，在此調(diào)整效果圖顯示比例。下同
        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）重寫，讓點(diǎn)擊事件觸發(fā)區(qū)域與上傳按鈕重合。

<style type="text/css">
	  /*彈出層上傳按鈕樣式*/
	  .swfupload{position:absolute;left:80px;top:16px}；
</style>

四、裁剪上傳完成后頁(yè)面清除原圖，顯示默認(rèn)底圖，且默認(rèn)底圖不可裁剪。

//圖片裁剪上傳
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("<li><img src='"+data+"' /></li>");
	        	api.destroy();
			$(".prodact_sc").hide();
			$(".back_a").hide();
			//圖片裁剪并上傳完畢之后清除
			$("#img").attr("src", "");
		        $("#preview").attr("src", "");
	        }
	    });
    }else{
		alert("請(qǐng)上傳Logo");
	}
}

<img id="img" src="/p_w_picpaths/no_logo_pic.jpg" onload="ImgAuto(this,432,249);" onerror="this.src='/p_w_picpaths/no_logo_pic.jpg'" />
<img src="/p_w_picpaths/no_logo_pic.jpg" id="preview"onerror="this.src='/p_w_picpaths/no_logo_pic.jpg'" />

當(dāng)前標(biāo)題：JQuery上傳插件Uploadify+Jcrop圖像裁剪的幾個(gè)常用小技巧
路徑分享：http://bm7419.com/article18/jjecgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷、品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、ChatGPT、定制開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容