上傳頭像demo,可以裁剪

請轉載此文的朋友務必附帶原文鏈接，謝謝。

原文鏈接：http://xuyran.blog.51cto.com/11641754/1866681

//上傳頭像
$(window).load(function() {
	$('#upload-file').on('change', function(){
		var fimg = this.files[0];
		var filter = /^(?:p_w_picpath\/bmp|p_w_picpath\/cis\-cod|p_w_picpath\/gif|p_w_picpath\/ief|p_w_picpath\/jpeg|p_w_picpath\/jpeg|p_w_picpath\/jpeg|p_w_picpath\/pipeg|p_w_picpath\/png|p_w_picpath\/svg\+xml|p_w_picpath\/tiff|p_w_picpath\/x\-cmu\-raster|p_w_picpath\/x\-cmx|p_w_picpath\/x\-icon|p_w_picpath\/x\-portable\-anymap|p_w_picpath\/x\-portable\-bitmap|p_w_picpath\/x\-portable\-graymap|p_w_picpath\/x\-portable\-pixmap|p_w_picpath\/x\-rgb|p_w_picpath\/x\-xbitmap|p_w_picpath\/x\-xpixmap|p_w_picpath\/x\-xwindowdump)$/i;
	    if(this.files.length !== 0){
		if(!filter.test(fimg.type)){
			alertBoxSmall("請選擇有效的圖片文件！");
		}else if(parseInt(fimg.size/1024) > 1024){
			alertBoxSmall("圖片大小不得超過1M！");
		}else{
		var reader = new FileReader();
		reader.onload = function(e) {
			$("#avatar")[0].src = e.target.result;
			cropped();
			//上傳頭像遮罩隨時變化
			$('img#avatar').imgAreaSelect({
					aspectRatio: "1:1",
					x1: 100,
					y1:0,
					x2: 300,
					y2: 200,
				});
			}
		reader.readAsDataURL(this.files[0]);
		}
		}
	})
	//$('#btnCrop').on('click', cropped);
});

//上傳頭像
				$('img#avatar').imgAreaSelect({
						aspectRatio: "1:1",
						x1: 100,
						y1:0,
						x2: 300,
						y2: 200,
						onSelectEnd: selectInit,
						onSelectChange: preview
					});			
function cropped(){
	var img = $("#avatar").attr("src");
	$('.cropped ul li:first-child img').attr("src",img);
	$('.cropped ul li:nth-child(2) img').attr("src",img);
	$('.cropped ul li:last-child img').attr("src",img);
}
function adjust(el, selection) {
	var scaleX = $(el).width() / (selection.width || 1);
	var scaleY = $(el).height() / (selection.width || 1);
	$(el+' img').css({
		width: Math.round(scaleX*$('#avatar').width() ) + 'px',
		height: Math.round(scaleY*$('#avatar').height() ) + 'px',
		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
	});
}

function preview(img, selection) {
	adjust('#small_preview01', selection);
	adjust('#small_preview02', selection);
	adjust('#small_preview03', selection);
}

/*圖像上傳2*/
/*
 * imgAreaSelect default style
 */

.imgareaselect-border1 {
	background: url(../p_w_picpaths/border-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
    background: url(../p_w_picpaths/border-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
    background: url(../p_w_picpaths/border-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
    background: url(../p_w_picpaths/border-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
    filter: alpha(opacity=80);
	opacity: 0.8;
}

.imgareaselect-handle {
    background-color: #fff;
    border: solid 1px #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.imgareaselect-outer {
    background-color: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    max-height: 200px;
}

.imgareaselect-selection {  
}

<div class="right-container set">
				<div class="">
					<div class="box02">
						<div class="p_w_picpathBox">
							<img id="avatar" src="../Content/p_w_picpaths/preview.png"/>
						   <!-- <div class="spinner" style="display: none">Loading...</div>-->
						</div>
						<form id="crop_form" method="post" action=".">
							<!--通過生成尺寸  後臺獲取尺寸再進行裁剪-->
							<input id="id_top" type="hidden" name="top" >
							<input id="id_left" type="hidden" name="left">
							<input id="id_right" type="hidden" name="right">
							<input id="id_bottom" type="hidden" name="bottom">
							<input id="id_width" type="hidden" /> 
							<input id="id_height" type="hidden" />
						</form>
						<div class="action"> 
						    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
							    <label for="upload-file">上傳</label>
							    </a>
							    <input type="file" class="" name="upload-file" id="upload-file" />
						    </div>
						    <input type="button" id="btnCrop"  class="Btnsty_peyton" value="保存">
						    <div class="imgIntro">你可以上傳JPG、JPEG、PNG格式文件，限制大小1M以內</div>

						</div>
							<div class="cropped" >
								<ul>
									<li >
										<span>100*100</span>
										<span class="img01" id="small_preview01"><img src="../Content/p_w_picpaths/preview.png" id="avatar1" style="margin-left: -50px;width: 200px;"/></span> 
									</li>
									<li >
										<span>55*55</span>
										<span class="img02" id="small_preview02"><img src="../Content/p_w_picpaths/preview.png" id="avatar2" style="margin-left: -25px;width: 110px;"/></span>
									</li>
									<li>
										<span>32*32</span>
										<span class="img03"  id="small_preview03"><img src="../Content/p_w_picpaths/preview.png" id="avatar3" style="margin-left: -15px;width: 64px;"/></span>
									</li>
								</ul>
							</div>
					</div>

效果如下，demo見附件：