jQuery实现头像预览

主要运用到的有jQuery以及其插件Jcrop。

要使用Jcrop要引入jQuery以及Jcrop。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.Jcrop.js" type="text/javascript"></script>

具体实现直接贴出来，IE可以直接读取路径显示比较方便，FireFox则要引用HTML5新特性，FileReader的API。

var MAXWIDTH = 330;
var MAXHEIGHT = 230;
var JCROPRATIO = 1;//这个属性主要是确定选择框的横纵比
jQuery(function($){
	var jcrop_api;
	FileReader = window.FileReader;
	
	$('#avatar').find("img:eq(0)").Jcrop({
			aspectRatio: JCROPRATIO,
	    	onChange:   showCoords,
	        onSelect:   showCoords,
	        onRelease:  clearCoords
	    },function(){
			jcrop_api = this;
	});
	
	$("#file").change(function() {
		var image = document.createElement('img');
		var width = MAXWIDTH;
		var height = MAXHEIGHT;
		$("#avatar").css('max-width',MAXWIDTH);
		$("#avatar").css('max-height',MAXHEIGHT);
		$("#avatar").css('width',MAXWIDTH);
		$("#avatar").css('height',MAXHEIGHT);
		$("#avatar").css('overflow','hidden');
		
		if(jcrop_api != null) {
			jcrop_api.destroy();
		}
		
		if (FileReader) {
			//FireFox
			var reader = new FileReader();
			var file = this.files[0];
			reader.readAsDataURL(file);
			reader.onload = function(e) {
				image.src = this.result;
				//设置长宽比,延迟0.4秒
				//长和宽需要图片完全加载的情况下才能读取，当然也可以通过后台获取
				 setTimeout(function() {
					width = image.width;
					height = image.height;
					var rat;
					if(width > MAXWIDTH) {
						rat = MAXWIDTH/width;
						width = MAXWIDTH;
						height = height*rat;
					}
					
					if(height > MAXHEIGHT) {
						rat = MAXHEIGHT/height;
						height = MAXHEIGHT;
						width = width*rat;
					}
					image.width = width;
					image.height = height;
					$("#avatar").html(image);
					$(image).Jcrop({
						aspectRatio: JCROPRATIO,
						onChange:   showCoords,
						onSelect:   showCoords,
						onRelease:  clearCoords
					},function(){
						jcrop_api = this;
					});
				 },500);//end of set time out
					
				
			};
			reader.onloadend = function(e){
				
			}; 
			
		} else {
			//IE
			var path = $(this).val();
			image.src = path;
			$("#avatar").html(image);
			$(image).Jcrop({
				aspectRatio: JCROPRATIO,
				onChange:   showCoords,
				onSelect:   showCoords,
				onRelease:  clearCoords
			},function(){
				jcrop_api = this;
			});
			
			//设置长宽比
			width = image.width;
			height = image.height;
			while(width > MAXWIDTH || height > MAXHEIGHT) {
				var rat;
				if(width > MAXWIDTH) {
					rat = MAXWIDTH/width;
					width = MAXWIDTH;
					height = height*rat;
				}
				
				if(height > MAXHEIGHT) {
					rat = MAXHEIGHT/height;
					height = MAXHEIGHT;
					width = width*rat;
				}
				
			}
			$(image).css('width',width);
			$(image).css('height',height);
		}
		
	});
	
});

function showCoords(c){
	$('#x1').val(c.x);
	$('#y1').val(c.y);
	$('#x2').val(c.x2);
	$('#y2').val(c.y2);
	$('#w').val(c.w);
	$('#h').val(c.h);
};

function clearCoords(){
	$('#x1').val('');
	$('#y1').val('');
	$('#x2').val('');
	$('#y2').val('');
	$('#w').val('');
	$('#h').val('');
};

页面如下，其中坐标和长宽可以传到后台根据具体需求运用。

<div><input type="file" id="file" name="file"/></div>
<div id="avatar"><img src="css/blank.png"/></div>
<div>
	<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
	<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
	<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
	<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
	<label>W <input type="text" size="4" id="w" name="w" /></label>
	<label>H <input type="text" size="4" id="h" name="h" /></label>
</div>