js+java實現的頭像上傳和裁剪，完美兼容各種瀏覽器

1.前端剪切效果使用jquery+js+div+css實現

其中有個js圖片剪切插件叫ImgCropper，吃插件與jquery插件一起使用會有bug，被我修改後能兼容jquery了

如果需要了解更多關於ImgCropper插件使用，請查看源碼或百度看例子吧

下面是我修改後的ImgCropper+Resize+Drag的集成代碼，使用時只需將代碼打包後，通過script標籤引用即可

var isIE = (document.all) ? true : false;

var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);

var $getElem = function (id) {
	return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
	create: function() {
		return function() { this.initialize.apply(this, arguments); }
	}
}

var Extend = function(destination, source) {
	for (var property in source) {
		destination[property] = source[property];
	}
}

var Bind = function(object, fun) {
	return function() {
		return fun.apply(object, arguments);
	}
}

var BindAsEventListener = function(object, fun) {
	var args = Array.prototype.slice.call(arguments).slice(2);
	return function(event) {
		return fun.apply(object, [event || window.event].concat(args));
	}
}

var CurrentStyle = function(element){
	return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

function addEventHandler(oTarget, sEventType, fnHandler) {
	if (oTarget.addEventListener) {
		oTarget.addEventListener(sEventType, fnHandler, false);
	} else if (oTarget.attachEvent) {
		oTarget.attachEvent("on" + sEventType, fnHandler);
	} else {
		oTarget["on" + sEventType] = fnHandler;
	}
};

function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = null;
    }
};

//圖片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
  //容器對象,控制層,圖片地址
  initialize: function(container, handle, url, options) {
	this._Container = $getElem(container);//容器對象
	this._layHandle = $getElem(handle);//控制層
	this.Url = url;//圖片地址

	this._layBase = this._Container.appendChild(document.createElement("img"));//底層
	this._layCropper = this._Container.appendChild(document.createElement("img"));//切割層
	this._layCropper.onload = Bind(this, this.SetPos);
	//用來設置大小
	this._tempImg = document.createElement("img");
	this._tempImg.onload = Bind(this, this.SetSize);

	this.SetOptions(options);

	this.Opacity = Math.round(this.options.Opacity);
	this.Color = this.options.Color;
	this.Scale = !!this.options.Scale;
	this.Ratio = Math.max(this.options.Ratio, 0);
	this.Width = Math.round(this.options.Width);
	this.Height = Math.round(this.options.Height);

	//設置預覽對象
	var oPreview = $getElem(this.options.Preview);//預覽對象
	if(oPreview){
		oPreview.style.position = "relative";
		oPreview.style.overflow = "hidden";
		this.viewWidth = Math.round(this.options.viewWidth);
		this.viewHeight = Math.round(this.options.viewHeight);
		//預覽圖片對象
		this._view = oPreview.appendChild(document.createElement("img"));
		this._view.style.position = "absolute";
		this._view.onload = Bind(this, this.SetPreview);
	}
	//設置拖放
	this._drag = new Drag(this._layHandle, { Limit: true, onMove: Bind(this, this.SetPos), Transparent: true });
	//設置縮放
	this.Resize = !!this.options.Resize;
	if(this.Resize){
		var op = this.options, _resize = new Resize(this._layHandle, { Max: true, onResize: Bind(this, this.SetPos) });
		//設置縮放觸發對象
		op.RightDown && (_resize.Set(op.RightDown, "right-down"));
		op.LeftDown && (_resize.Set(op.LeftDown, "left-down"));
		op.RightUp && (_resize.Set(op.RightUp, "right-up"));
		op.LeftUp && (_resize.Set(op.LeftUp, "left-up"));
		op.Right && (_resize.Set(op.Right, "right"));
		op.Left && (_resize.Set(op.Left, "left"));
		op.Down && (_resize.Set(op.Down, "down"));
		op.Up && (_resize.Set(op.Up, "up"));
		//最小範圍限制
		this.Min = !!this.options.Min;
		this.minWidth = Math.round(this.options.minWidth);
		this.minHeight = Math.round(this.options.minHeight);
		//設置縮放對象
		this._resize = _resize;
	}
	//設置樣式
	this._Container.style.position = "relative";
	this._Container.style.overflow = "hidden";
	this._layHandle.style.zIndex = 200;
	this._layCropper.style.zIndex = 100;
	this._layBase.style.position = this._layCropper.style.position = "absolute";
	this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;//對齊
	//初始化設置
	this.Init();
  },
  //設置默認屬性
  SetOptions: function(options) {
    this.options = {//默認值
		Opacity:	50,//透明度(0到100)
		Color:		"",//背景色
		Width:		0,//圖片高度
		Height:		0,//圖片高度
		//縮放觸發對象
		Resize:		false,//是否設置縮放
		Right:		"",//右邊縮放對象
		Left:		"",//左邊縮放對象
		Up:			"",//上邊縮放對象
		Down:		"",//下邊縮放對象
		RightDown:	"",//右下縮放對象
		LeftDown:	"",//左下縮放對象
		RightUp:	"",//右上縮放對象
		LeftUp:		"",//左上縮放對象
		Min:		false,//是否最小寬高限制(爲true時下面min參數有用)
		minWidth:	50,//最小寬度
		minHeight:	50,//最小高度
		Scale:		false,//是否按比例縮放
		Ratio:		0,//縮放比例(寬/高)
		//預覽對象設置
		Preview:	"",//預覽對象
		viewWidth:	0,//預覽寬度
		viewHeight:	0//預覽高度
    };
    Extend(this.options, options || {});
  },
  //初始化對象
  Init: function() {
	//設置背景色
	this.Color && (this._Container.style.backgroundColor = this.Color);
	//設置圖片
	this._tempImg.src = this._layBase.src = this._layCropper.src = this.Url;
	//設置透明
	if(isIE){
		this._layBase.style.filter = "alpha(opacity:" + this.Opacity + ")";
	} else {
		this._layBase.style.opacity = this.Opacity / 100;
	}
	//設置預覽對象
	this._view && (this._view.src = this.Url);
	//設置縮放
	if(this.Resize){
		with(this._resize){
			Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth = this.minWidth; minHeight = this.minHeight;
		}
	}
  },
  //設置切割樣式
  SetPos: function() {
	//ie6渲染bug
	if(isIE6){ with(this._layHandle.style){ zoom = .9; zoom = 1; }; };
	//獲取位置參數
	var p = this.GetPos();
	//按拖放對象的參數進行切割
	this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)";
	//設置預覽
	this.SetPreview();
  },
  //設置預覽效果
  SetPreview: function() {
	if(this._view){
		//預覽顯示的寬和高
		var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height;
		//按比例設置參數
		var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left * scale;
		//設置預覽對象
		with(this._view.style){
			//設置樣式
			width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px";
			//切割預覽圖
			clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)";
		}
	}
  },
  //設置圖片大小
  SetSize: function() {
	var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height);
	//設置底圖和切割圖
	this._layBase.style.width = this._layCropper.style.width = s.Width + "px";
	this._layBase.style.height = this._layCropper.style.height = s.Height + "px";
	//設置拖放範圍
	this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height;
	//設置縮放範圍
	//if(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; }
	/*2015-9-6 15:45:16修改by wqj*/
	if(this.Resize){ this._resize.mxRight = Math.round(s.Width); this._resize.mxBottom = Math.round(s.Height); }
  },
  //獲取當前樣式
  GetPos: function() {
	with(this._layHandle){
		return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight }
	}
  },
  //獲取尺寸
  GetSize: function(nowWidth, nowHeight, fixWidth, fixHeight) {
	var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight;
	//按比例設置
	if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; }
	if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; }
	//返回尺寸對象
	return { Width: iWidth, Height: iHeight }
  }
};
//拖放程序
var Drag = Class.create();
Drag.prototype = {
  //拖放對象
  initialize: function(drag, options) {
	this.Drag = $getElem(drag);//拖放對象
	this._x = this._y = 0;//記錄鼠標相對拖放對象的位置
	this._marginLeft = this._marginTop = 0;//記錄margin
	//事件對象(用於綁定移除事件)
	this._fM = BindAsEventListener(this, this.Move);
	this._fS = Bind(this, this.Stop);

	this.SetOptions(options);

	this.Limit = !!this.options.Limit;
	this.mxLeft = parseInt(this.options.mxLeft);
	this.mxRight = parseInt(this.options.mxRight);
	this.mxTop = parseInt(this.options.mxTop);
	this.mxBottom = parseInt(this.options.mxBottom);

	this.LockX = !!this.options.LockX;
	this.LockY = !!this.options.LockY;
	this.Lock = !!this.options.Lock;

	this.onStart = this.options.onStart;
	this.onMove = this.options.onMove;
	this.onStop = this.options.onStop;

	this._Handle = $getElem(this.options.Handle) || this.Drag;
	this._mxContainer = $getElem(this.options.mxContainer) || null;

	this.Drag.style.position = "absolute";
	//透明
	if(isIE && !!this.options.Transparent){
		//填充拖放對象
		with(this._Handle.appendChild(document.createElement("div")).style){
			width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize = 0;
		}
	}
	//修正範圍
	this.Repair();
	addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));
  },
  //設置默認屬性
  SetOptions: function(options) {
	this.options = {//默認值
		Handle:			"",//設置觸發對象（不設置則使用拖放對象）
		Limit:			false,//是否設置範圍限制(爲true時下面參數有用,可以是負數)
		mxLeft:			0,//左邊限制
		mxRight:		9999,//右邊限制
		mxTop:			0,//上邊限制
		mxBottom:		9999,//下邊限制
		mxContainer:	"",//指定限制在容器內
		LockX:			false,//是否鎖定水平方向拖放
		LockY:			false,//是否鎖定垂直方向拖放
		Lock:			false,//是否鎖定
		Transparent:	false,//是否透明
		onStart:		function(){},//開始移動時執行
		onMove:			function(){},//移動時執行
		onStop:			function(){}//結束移動時執行
	};
	Extend(this.options, options || {});
  },
  //準備拖動
  Start: function(oEvent) {
	if(this.Lock){ return; }
	this.Repair();
	//記錄鼠標相對拖放對象的位置
	this._x = oEvent.clientX - this.Drag.offsetLeft;
	this._y = oEvent.clientY - this.Drag.offsetTop;
	//記錄margin
	this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
	this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
	//mousemove時移動 mouseup時停止
	addEventHandler(document, "mousemove", this._fM);
	addEventHandler(document, "mouseup", this._fS);
	if(isIE){
		//焦點丟失
		addEventHandler(this._Handle, "losecapture", this._fS);
		//設置鼠標捕獲
		this._Handle.setCapture();
	}else{
		//焦點丟失
		addEventHandler(window, "blur", this._fS);
		//阻止默認動作
		oEvent.preventDefault();
	};
	//附加程序
	this.onStart();
  },
  //修正範圍
  Repair: function() {
	if(this.Limit){
		//修正錯誤範圍參數
		this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
		this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
		//如果有容器必須設置position爲relative或absolute來相對或絕對定位，並在獲取offset之前設置
		!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");
	}
  },
  //拖動
  Move: function(oEvent) {
	//判斷是否鎖定
	if(this.Lock){ this.Stop(); return; };
	//清除選擇
	window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
	//設置移動參數
	var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
	//設置範圍限制
	if(this.Limit){
		//設置範圍參數
		var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
		//如果設置了容器，再修正範圍參數
		if(!!this._mxContainer){
			mxLeft = Math.max(mxLeft, 0);
			mxTop = Math.max(mxTop, 0);
			mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
			mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
		};
		//修正移動參數
		iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
		iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
	}
	//設置位置，並修正margin
	if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }
	if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }
	//附加程序
	this.onMove();
  },
  //停止拖動
  Stop: function() {
	//移除事件
	removeEventHandler(document, "mousemove", this._fM);
	removeEventHandler(document, "mouseup", this._fS);
	if(isIE){
		removeEventHandler(this._Handle, "losecapture", this._fS);
		this._Handle.releaseCapture();
	}else{
		removeEventHandler(window, "blur", this._fS);
	};
	//附加程序
	this.onStop();
  }
};
//縮放程序
var Resize = Class.create();
Resize.prototype = {
  //縮放對象
  initialize: function(obj, options) {
	this._obj = $getElem(obj);//縮放對象

	this._styleWidth = this._styleHeight = this._styleLeft = this._styleTop = 0;//樣式參數
	this._sideRight = this._sideDown = this._sideLeft = this._sideUp = 0;//座標參數
	this._fixLeft = this._fixTop = 0;//定位參數
	this._scaleLeft = this._scaleTop = 0;//定位座標

	this._mxSet = function(){};//範圍設置程序
	this._mxRightWidth = this._mxDownHeight = this._mxUpHeight = this._mxLeftWidth = 0;//範圍參數
	this._mxScaleWidth = this._mxScaleHeight = 0;//比例範圍參數

	this._fun = function(){};//縮放執行程序

	//獲取邊框寬度
	var _style = CurrentStyle(this._obj);
	this._borderX = (parseInt(_style.borderLeftWidth) || 0) + (parseInt(_style.borderRightWidth) || 0);
	this._borderY = (parseInt(_style.borderTopWidth) || 0) + (parseInt(_style.borderBottomWidth) || 0);
	//事件對象(用於綁定移除事件)
	this._fR = BindAsEventListener(this, this.Resize);
	this._fS = Bind(this, this.Stop);

	this.SetOptions(options);
	//範圍限制
	this.Max = !!this.options.Max;
	this._mxContainer = $getElem(this.options.mxContainer) || null;
	this.mxLeft = Math.round(this.options.mxLeft);
	this.mxRight = Math.round(this.options.mxRight);
	this.mxTop = Math.round(this.options.mxTop);
	this.mxBottom = Math.round(this.options.mxBottom);
	//寬高限制
	this.Min = !!this.options.Min;
	this.minWidth = Math.round(this.options.minWidth);
	this.minHeight = Math.round(this.options.minHeight);
	//按比例縮放
	this.Scale = !!this.options.Scale;
	this.Ratio = Math.max(this.options.Ratio, 0);

	this.onResize = this.options.onResize;

	this._obj.style.position = "absolute";
	!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");
  },
  //設置默認屬性
  SetOptions: function(options) {
    this.options = {//默認值
		Max:		false,//是否設置範圍限制(爲true時下面mx參數有用)
		mxContainer:"",//指定限制在容器內
		mxLeft:		0,//左邊限制
		mxRight:	9999,//右邊限制
		mxTop:		0,//上邊限制
		mxBottom:	9999,//下邊限制
		Min:		false,//是否最小寬高限制(爲true時下面min參數有用)
		minWidth:	50,//最小寬度
		minHeight:	50,//最小高度
		Scale:		false,//是否按比例縮放
		Ratio:		0,//縮放比例(寬/高)
		onResize:	function(){}//縮放時執行
    };
    Extend(this.options, options || {});
  },
  //設置觸發對象
  Set: function(resize, side) {
	var resize = $getElem(resize), fun;
	if(!resize) return;
	//根據方向設置
	switch (side.toLowerCase()) {
	case "up" :
		fun = this.Up;
		break;
	case "down" :
		fun = this.Down;
		break;
	case "left" :
		fun = this.Left;
		break;
	case "right" :
		fun = this.Right;
		break;
	case "left-up" :
		fun = this.LeftUp;
		break;
	case "right-up" :
		fun = this.RightUp;
		break;
	case "left-down" :
		fun = this.LeftDown;
		break;
	case "right-down" :
	default :
		fun = this.RightDown;
	};
	//設置觸發對象
	addEventHandler(resize, "mousedown", BindAsEventListener(this, this.Start, fun));
  },
  //準備縮放
  Start: function(e, fun, touch) {
	//防止冒泡(跟拖放配合時設置)
	e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
	//設置執行程序
	this._fun = fun;
	//樣式參數值
	this._styleWidth = this._obj.clientWidth;
	this._styleHeight = this._obj.clientHeight;
	this._styleLeft = this._obj.offsetLeft;
	this._styleTop = this._obj.offsetTop;
	//四條邊定位座標
	this._sideLeft = e.clientX - this._styleWidth;
	this._sideRight = e.clientX + this._styleWidth;
	this._sideUp = e.clientY - this._styleHeight;
	this._sideDown = e.clientY + this._styleHeight;
	//top和left定位參數
	this._fixLeft = this._styleLeft + this._styleWidth;
	this._fixTop = this._styleTop + this._styleHeight;
	//縮放比例
	if(this.Scale){
		//設置比例
		this.Ratio = Math.max(this.Ratio, 0) || this._styleWidth / this._styleHeight;
		//left和top的定位座標
		this._scaleLeft = this._styleLeft + this._styleWidth / 2;
		this._scaleTop = this._styleTop + this._styleHeight / 2;
	};
	//範圍限制
	if(this.Max){
		//設置範圍參數
		var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
		//如果設置了容器，再修正範圍參數
		if(!!this._mxContainer){
			mxLeft = Math.max(mxLeft, 0);
			mxTop = Math.max(mxTop, 0);
			mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
			mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
		};
		//根據最小值再修正
		mxRight = Math.max(mxRight, mxLeft + (this.Min ? this.minWidth : 0) + this._borderX);
		mxBottom = Math.max(mxBottom, mxTop + (this.Min ? this.minHeight : 0) + this._borderY);
		//由於轉向時要重新設置所以寫成function形式
		this._mxSet = function(){
			this._mxRightWidth = mxRight - this._styleLeft - this._borderX;
			this._mxDownHeight = mxBottom - this._styleTop - this._borderY;
			this._mxUpHeight = Math.max(this._fixTop - mxTop, this.Min ? this.minHeight : 0);
			this._mxLeftWidth = Math.max(this._fixLeft - mxLeft, this.Min ? this.minWidth : 0);
		};
		this._mxSet();
		//有縮放比例下的範圍限制
		if(this.Scale){
			this._mxScaleWidth = Math.min(this._scaleLeft - mxLeft, mxRight - this._scaleLeft - this._borderX) * 2;
			this._mxScaleHeight = Math.min(this._scaleTop - mxTop, mxBottom - this._scaleTop - this._borderY) * 2;
		};
	};
	//mousemove時縮放 mouseup時停止
	addEventHandler(document, "mousemove", this._fR);
	addEventHandler(document, "mouseup", this._fS);
	if(isIE){
		addEventHandler(this._obj, "losecapture", this._fS);
		this._obj.setCapture();
	}else{
		addEventHandler(window, "blur", this._fS);
		e.preventDefault();
	};
  },
  //縮放
  Resize: function(e) {
	//清除選擇
	window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
	//執行縮放程序
	this._fun(e);
	//設置樣式，變量必須大於等於0否則ie出錯
	with(this._obj.style){
		width = this._styleWidth + "px"; height = this._styleHeight + "px";
		top = this._styleTop + "px"; left = this._styleLeft + "px";
	}
	//附加程序
	this.onResize();
  },
  //縮放程序
  //上
  Up: function(e) {
	this.RepairY(this._sideDown - e.clientY, this._mxUpHeight);
	this.RepairTop();
	this.TurnDown(this.Down);
  },
  //下
  Down: function(e) {
	this.RepairY(e.clientY - this._sideUp, this._mxDownHeight);
	this.TurnUp(this.Up);
  },
  //右
  Right: function(e) {
	this.RepairX(e.clientX - this._sideLeft, this._mxRightWidth);
	this.TurnLeft(this.Left);
  },
  //左
  Left: function(e) {
	this.RepairX(this._sideRight - e.clientX, this._mxLeftWidth);
	this.RepairLeft();
	this.TurnRight(this.Right);
  },
  //右下
  RightDown: function(e) {
	this.RepairAngle(
		e.clientX - this._sideLeft, this._mxRightWidth,
		e.clientY - this._sideUp, this._mxDownHeight
	);
	this.TurnLeft(this.LeftDown) || this.Scale || this.TurnUp(this.RightUp);
  },
  //右上
  RightUp: function(e) {
	this.RepairAngle(
		e.clientX - this._sideLeft, this._mxRightWidth,
		this._sideDown - e.clientY, this._mxUpHeight
	);
	this.RepairTop();
	this.TurnLeft(this.LeftUp) || this.Scale || this.TurnDown(this.RightDown);
  },
  //左下
  LeftDown: function(e) {
	this.RepairAngle(
		this._sideRight - e.clientX, this._mxLeftWidth,
		e.clientY - this._sideUp, this._mxDownHeight
	);
	this.RepairLeft();
	this.TurnRight(this.RightDown) || this.Scale || this.TurnUp(this.LeftUp);
  },
  //左上
  LeftUp: function(e) {
	this.RepairAngle(
		this._sideRight - e.clientX, this._mxLeftWidth,
		this._sideDown - e.clientY, this._mxUpHeight
	);
	this.RepairTop(); this.RepairLeft();
	this.TurnRight(this.RightUp) || this.Scale || this.TurnDown(this.LeftDown);
  },
  //修正程序
  //水平方向
  RepairX: function(iWidth, mxWidth) {
	iWidth = this.RepairWidth(iWidth, mxWidth);
	if(this.Scale){
		var iHeight = this.RepairScaleHeight(iWidth);
		if(this.Max && iHeight > this._mxScaleHeight){
			iHeight = this._mxScaleHeight;
			iWidth = this.RepairScaleWidth(iHeight);
		}else if(this.Min && iHeight < this.minHeight){
			var tWidth = this.RepairScaleWidth(this.minHeight);
			if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }
		}
		this._styleHeight = iHeight;
		this._styleTop = this._scaleTop - iHeight / 2;
	}
	this._styleWidth = iWidth;
  },
  //垂直方向
  RepairY: function(iHeight, mxHeight) {
	iHeight = this.RepairHeight(iHeight, mxHeight);
	if(this.Scale){
		var iWidth = this.RepairScaleWidth(iHeight);
		if(this.Max && iWidth > this._mxScaleWidth){
			iWidth = this._mxScaleWidth;
			iHeight = this.RepairScaleHeight(iWidth);
		}else if(this.Min && iWidth < this.minWidth){
			var tHeight = this.RepairScaleHeight(this.minWidth);
			if(tHeight < mxHeight){ iWidth = this.minWidth; iHeight = tHeight; }
		}
		this._styleWidth = iWidth;
		this._styleLeft = this._scaleLeft - iWidth / 2;
	}
	this._styleHeight = iHeight;
  },
  //對角方向
  RepairAngle: function(iWidth, mxWidth, iHeight, mxHeight) {
	iWidth = this.RepairWidth(iWidth, mxWidth);
	if(this.Scale){
		iHeight = this.RepairScaleHeight(iWidth);
		if(this.Max && iHeight > mxHeight){
			iHeight = mxHeight;
			iWidth = this.RepairScaleWidth(iHeight);
		}else if(this.Min && iHeight < this.minHeight){
			var tWidth = this.RepairScaleWidth(this.minHeight);
			if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }
		}
	}else{
		iHeight = this.RepairHeight(iHeight, mxHeight);
	}
	this._styleWidth = iWidth;
	this._styleHeight = iHeight;
  },
  //top
  RepairTop: function() {
	this._styleTop = this._fixTop - this._styleHeight;
  },
  //left
  RepairLeft: function() {
	this._styleLeft = this._fixLeft - this._styleWidth;
  },
  //height
  RepairHeight: function(iHeight, mxHeight) {
	iHeight = Math.min(this.Max ? mxHeight : iHeight, iHeight);
	iHeight = Math.max(this.Min ? this.minHeight : iHeight, iHeight, 0);
	return iHeight;
  },
  //width
  RepairWidth: function(iWidth, mxWidth) {
	iWidth = Math.min(this.Max ? mxWidth : iWidth, iWidth);
	iWidth = Math.max(this.Min ? this.minWidth : iWidth, iWidth, 0);
	return iWidth;
  },
  //比例高度
  RepairScaleHeight: function(iWidth) {
	return Math.max(Math.round((iWidth + this._borderX) / this.Ratio - this._borderY), 0);
  },
  //比例寬度
  RepairScaleWidth: function(iHeight) {
	return Math.max(Math.round((iHeight + this._borderY) * this.Ratio - this._borderX), 0);
  },
  //轉向程序
  //轉右
  TurnRight: function(fun) {
	if(!(this.Min || this._styleWidth)){
		this._fun = fun;
		this._sideLeft = this._sideRight;
		this.Max && this._mxSet();
		return true;
	}
  },
  //轉左
  TurnLeft: function(fun) {
	if(!(this.Min || this._styleWidth)){
		this._fun = fun;
		this._sideRight = this._sideLeft;
		this._fixLeft = this._styleLeft;
		this.Max && this._mxSet();
		return true;
	}
  },
  //轉上
  TurnUp: function(fun) {
	if(!(this.Min || this._styleHeight)){
		this._fun = fun;
		this._sideDown = this._sideUp;
		this._fixTop = this._styleTop;
		this.Max && this._mxSet();
		return true;
	}
  },
  //轉下
  TurnDown: function(fun) {
	if(!(this.Min || this._styleHeight)){
		this._fun = fun;
		this._sideUp = this._sideDown;
		this.Max && this._mxSet();
		return true;
	}
  },
  //停止縮放
  Stop: function() {
	removeEventHandler(document, "mousemove", this._fR);
	removeEventHandler(document, "mouseup", this._fS);
	if(isIE){
		removeEventHandler(this._obj, "losecapture", this._fS);
		this._obj.releaseCapture();
	}else{
		removeEventHandler(window, "blur", this._fS);
	}
  }
};

2.頭像剪切頁面我也進行了一些部件，佈局樣式是參考了百度頭像上傳佈局，上傳圖片使用了ajaxFileUpload.js插件

需要注意的是：

a.ajaxFileUpload插件上傳圖片，服務端返回的json時，response需要設置contentType爲text/html;charset=UTF-8，不然ajaxFileUpload插件不會靜success回調方法，調試ajaxFileUpload可以看返回的json被加上了pre標籤，也可以在uploadHttpData屬性定義裏將pre標籤去除

b.使用ajaxFileUpload插件時，還可能遇見一個錯誤就是jQuery.handleError 方法未定義，由於jquery1.4.2以後的版本都把這個方法去掉了，所以需要我們自己將1.4.1版本的handleError方法copy到jquery架包中或ajaxFileUpload架包中，我是copy到ajaxFileUpload架包中的

添加handleError方法後的ajaxFileUpload代碼：

jQuery.extend({

    createUploadIframe: function(id, uri)
	{
			//create frame
            var frameId = 'jUploadFrame' + id;

            if(window.ActiveXObject) {
                var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                if(typeof uri== 'boolean'){
                    io.src = 'javascript:false';
                }
                else if(typeof uri== 'string'){
                    io.src = uri;
                }
            }
            else {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            io.style.top = '-1000px';
            io.style.left = '-1000px';

            document.body.appendChild(io);

            return io
    },
    createUploadForm: function(id, fileElementId)
	{
		//create form
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
		var oldElement = $('#' + fileElementId);
		var newElement = $(oldElement).clone();
		$(oldElement).attr('id', fileId);
		$(oldElement).before(newElement);
		$(oldElement).appendTo(form);
		//set attributes
		$(form).css('position', 'absolute');
		$(form).css('top', '-1200px');
		$(form).css('left', '-1200px');
		$(form).appendTo('body');
		return form;
    },

    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = s.fileElementId;
		var form = jQuery.createUploadForm(id, s.fileElementId);
		var io = jQuery.createUploadIframe(id, s.secureuri);
		var frameId = 'jUploadFrame' + id;
		var formId = 'jUploadForm' + id;
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
		{
			jQuery.event.trigger( "ajaxStart" );
		}
        var requestDone = false;
        // Create the request object
        var xml = {}
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function(isTimeout)
		{
			var io = document.getElementById(frameId);
            try
			{
				if(io.contentWindow)
				{
					 xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                	 xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

				}else if(io.contentDocument)
				{
					 xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                	xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
				}
            }catch(e)
			{
				jQuery.handleError(s, xml, null, e);
			}
            if ( xml || isTimeout == "timeout")
			{
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if ( status != "error" )
					{
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData( xml, s.dataType );
                        // If a local callback was specified, fire it and pass it the data
                        if ( s.success )
                            s.success( data, status );

                        // Fire the global callback
                        if( s.global )
                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                    } else
                        jQuery.handleError(s, xml, status);
                } catch(e)
				{
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }

                // The request was completed
                if( s.global )
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );

                // Handle the global AJAX counter
                if ( s.global && ! --jQuery.active )
                    jQuery.event.trigger( "ajaxStop" );

                // Process result
                if ( s.complete )
                    s.complete(xml, status);

                jQuery(io).unbind()

                setTimeout(function()
									{	try
										{
											$(io).remove();
											$(form).remove();

										} catch(e)
										{
											jQuery.handleError(s, xml, null, e);
										}

									}, 100)

                xml = null

            }
        }
        // Timeout checker
        if ( s.timeout > 0 )
		{
            setTimeout(function(){
                // Check to see if the request is still happening
                if( !requestDone ) uploadCallback( "timeout" );
            }, s.timeout);
        }
        try
		{
           // var io = $('#' + frameId);
			var form = $('#' + formId);
			$(form).attr('action', s.url);
			$(form).attr('method', 'POST');
			$(form).attr('target', frameId);
            if(form.encoding)
			{
                form.encoding = 'multipart/form-data';
            }
            else
			{
                form.enctype = 'multipart/form-data';
            }
            $(form).submit();

        } catch(e)
		{
            jQuery.handleError(s, xml, null, e);
        }
        if(window.attachEvent){
            document.getElementById(frameId).attachEvent('onload', uploadCallback);
        }
        else{
            document.getElementById(frameId).addEventListener('load', uploadCallback, false);
        }
        return {abort: function () {}};

    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();
			//alert($('param', data).each(function(){alert($(this).attr('value'));}));
        return data;
    },
    handleError: function( s, xhr, status, e ) {
		// If a local callback was specified, fire it
		if ( s.error ) {
			s.error.call( s.context || s, xhr, status, e );
		}

		// Fire the global callback
		if ( s.global ) {
			(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
		}
	}
});

頁面佈局如下

截取頁面佈局源碼

<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" ></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>圖片裁剪及上傳</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  -->
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<style type="text/css">
body,ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,input,label,span,img{margin: 0px;padding: 0px; list-style:none outside none;}
body,button,input,select,textarea{font:12px/1.5 Tahoma,Helvetica,Arial,"宋體",sans-serif; color:#333;}
a{ text-decoration:none;color:#333;}
a:hover{text-decoration:none;color:#C00;}
.passPortraitWrapper{

}
.passPortraitBox{
	width:680px;
	margin:0px auto;
	padding:10px;
	overflow:hidden;
}
.passPortraitLeftSide{
	display:inline;
	float:left;
	width:440px;
}
.selectPortaitLabel{
	position:relative;
	padding-bottom:10px;
}
.portraitFile{
	height:38px;
	line-height:38px;
	width:130px;
	position:absolute;
	left:0px;
	overflow:hidden;
	font-size:24px;
	opacity: 0;
	filter: alpha(opacity=0);

}
.portraitBtn{
	height:38px;
	line-height:38px;
	width:130px;
	border: medium none;
	background: transparent url('${ctxPath}/resources/images/ImgCropper/crop_img_sprite.png') no-repeat scroll 0% 0%;

}
.selectPortraitBtn{
	background-position:0px 0px;
	color:#666;
}
.selectPortaitNote{
	display:inline-block;
	position:absolute;
	font-size:12px;
	height:24px;
	line-height:24px;
	color:#999;
	text-align:left;
	top: 8px;
	left: 140px;
}
.portraitFilePath{
	display:block;
	color:#999;
	line-height:20px;
}
.portraitBox{
	height:300px;
	width:440px;
	overflow:auto;
}
.portraitBG{
	height:300px;
	line-height:300px;
	width:400px;
	background:#E2E2E2 none repeat scroll 0% 0%;
	position:absolute;
}
.portraitLoad{
	height:16px;
	width:16px;
	font-size:0px;
	position:absolute;
	top:142px;
	left:192px;
	z-index:100;
}
.portraitPosition{
	position: relative;
	left: 50%;
	top: 50%;
}
.portraitSelection{
	width: 404px;
	height: 304px;
	position: absolute;
	top: -2px;
	left: -2px;
	cursor: crosshair;
	z-index: 290;
}
.portraitImg{

}
.okPortraitLabel{
	padding-top:10px;
	 position:relative;
}
.okPortraitBtn{
 background-position:0px -38px;
 color:#fefefe;
}
.okPortraitBtn_disable{
	background-position:0px -151px;
}
.passPortraitRightSide{
	display:inline;
	float:right;
	width:180px;
	height:390px;
	border-left:1px solid #E5E5E5;
	padding-left:36px;
	margin-left:10px;
	position:relative;
}
.portraitPreviewBox{
	position:absolute;
	top:0px;
}
.portraitPreviewLabel{
	height:38px;
	line-height:38px;
	font-size:14px;
	color:#666;
}
.portraitPreviewContent{
	height:160px;
	width:160px;
	border:1px dashed #000;
}
.portraitPresetBox{
	position:absolute;
	bottom:0px;
}
.portraitPresetLabel{
	height:38px;
	line-height:38px;
	font-size:14px;
	color:#666;
}
.portraitPresetContent{
	width:180px;
	height:80px;
	overflow:hidden;
	position:relative;
	border:1px solid #eee;
}
.portraitPresetUl{
	width:1000px;
}
.portraitPresetLi{
	height:80px;
	width:80px;
	float:left;
}
.portraitPresetArrowBox{
	width:180px;
	position:absolute;
	right:0px;
	top:0px;
}
.portraitPresetArrow{
	width:16px;
	height:16px;
	position:absolute;
}
.portraitPresetPrep{
	background:url('${ctxPath}/resources/images/ImgCropper/previous.png') no-repeat;
	left:0px;
	top:32px
}
.portraitPresetNext{
	background:url('${ctxPath}/resources/images/ImgCropper/next.png') no-repeat;
	right:0px;
	top:32px
}
.portraitPresetArrowBG{
	width:16px;
	height:80px;
	position:absolute;
	top:0px;
}
.portraitPresetPrepBG{
	background:#777;
	left:0px;
}
.portraitPresetNextBG{
	background:#777;
	right:0px;
}
.msg_content{
	height:20px;
	line-height:20px;
	text-align:left;
	color:#999;
	position:absolute;
	padding-left:20px;
	top:18px;
	left:140px;
}
.msg_icon{
	width:16px;
	height:16px;
	font-size:0px;
	position:absolute;
	top:2px;
	left:2px;
}
.msg_icon_ok{
	background:url('${ctxPath}/resources/images/icons/ok.gif') no-repeat;
}
.msg_icon_warning{
	background:url('${ctxPath}/resources/images/icons/warning.gif') no-repeat;
}
.msg_icon_info{
	background:url('${ctxPath}/resources/images/icons/info.gif') no-repeat;
}
.imgViewBG{
	height:300px;
	background:#E2E2E2;
	position:relative;
}
#imgView{
}
/*頁籤佈局開始*/
.tab_wrap{

}
.tab_nav_group{
	background:#ccc;
	overflow:hidden;
}
.tab_nav_ul{

}
.tab_nav_li{
	height:24px;
	line-height:24px;
	padding:0px 10px;
	border-right:1px solid #999;
	float:left;
	cursor:pointer;
}
.tab_nav_cuur{
	background:#fff;
}
.tab_content{
	overflow:hidden;
}
/*頁籤佈局結束*/
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
	position:absolute;
	background:#FFF;
	border: 1px solid #333;
	width: 6px;
	height: 6px;
	z-index:500;
	font-size:0;
	opacity: 0.5;
	filter:alpha(opacity=50);
}

#rLeftDown,#rRightUp{cursor:ne-resize;}
#rRightDown,#rLeftUp{cursor:nw-resize;}
#rRight,#rLeft{cursor:e-resize;}
#rUp,#rDown{cursor:n-resize;}
#rLeftDown{left:-4px;bottom:-4px;}
#rRightUp{right:-4px;top:-4px;}
#rRightDown{right:-4px;bottom:-4px;background-color:#00F;}
#rLeftUp{left:-4px;top:-4px;}
#rRight{right:-4px;top:50%;margin-top:-4px;}
#rLeft{left:-4px;top:50%;margin-top:-4px;}
#rUp{top:-4px;left:50%;margin-left:-4px;}
#rDown{bottom:-4px;left:50%;margin-left:-4px;}
#bgDiv{position:relative;}
#dragDiv{border:1px dashed #000; width:100px; height:100px; top:0px; left:0px; cursor:move;position:absolute; }
	</style>
	<!-- 導入js架包 -->
	<script type="text/javascript" src="${ctxPath}/resources/js/jquery/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="${ctxPath}/resources/js/ImgCropper/ImgCropper-integration.js" ></script>
	<script type="text/javascript" src="${ctxPath}/resources/js/util/ajaxFileUpload.js" ></script>
	<script type="text/javascript" src="${ctxPath}/resources/js/imgReady/imgReady.js" ></script>
	<script type="text/javascript">
		var requestObj = {
			attachAction:"${ctxPath}/uploadController?action=uploadAttach",
			clipAction:"${ctxPath}/uploadController?action=clipImg"
		};
		var backImage = {id:"",url:"",clipId:"",clipUrl:""};
		//頁籤標記
		var tabFlag = 0;
		var msgObj = {
		    '0': '成功上傳圖片',
		    '1': '圖片剪切成功',
		    '2': '請選擇裁剪區域',
		    '3': '請上傳正確格式圖片',
		    '4': '上傳文件異常',
		    errnoErrno: 5,
		    successErrno: 0,
		    errnoPortraitMsg: '獲取圖片失敗',
		    errImgMsg: '請上傳正確格式圖片',
		    errCropMsg: '請選擇裁剪區域',
		    errUploadMsg: '上傳失敗'
		};
		var ic , scale = 1;
		/* function selectImgFile(){
			document.getElementById("fileImg").click();
		} */
		function uploadImg(file){
			var fileId = file.id;
			if(!validateImg(file)){
				return;
			}
			if(tabFlag == 0){
				$("#portraitLoad1").css("display","block");
				$("#bgDiv").css("display","none");
			}else{
				$("#portraitLoad2").css("display","block");
				$("#imgView").css("display","none");
			}
			 $.ajaxFileUpload({
			        url: requestObj.attachAction,
			        fileElementId: fileId,
			        dataType: 'json',
			        data: {},
			        success: function (m, l) {
			          if (m.errno == msgObj.successErrno) {
			        	  backImage.id = m.picId;
			        	  backImage.clipId = m.picId;
				          backImage.url = decodeURIComponent(decodeURIComponent(m.portraitUrl));
				          backImage.clipUrl = decodeURIComponent(decodeURIComponent(m.portraitUrl));
			      		if(tabFlag == 0){
			      			showCrop();
			      			$("#clip_ok").removeClass("okPortraitBtn_disable");
			      			$("#file_btn1").val("重新選擇");
			      		}else{
							showImgView();
							$("#upload_ok").removeClass("okPortraitBtn_disable");
							$("#file_btn2").val("重新選擇");
			      		}
			      		showPromptInfo(m.errno, "");

			          } else {
			            if (m.errno == 1) {
							showPromptInfo(m.errno, msgObj.errUploadMsg);
			            } else {
							showPromptInfo(m.errno, msgObj[m.errno] || msgObj.errUploadMsg);
			            }
			          }
			        }
			 });
		}
		function showCrop(){
			$("#portraitLoad1").css("display","none");
			var url = backImage.clipUrl;
			var containerWidth = 400;
			var containerHeight = 300;
			var widthScale = 1.0 ,heightScale = 1.0;
			//圖片在div中的高寬度
			var imgBoxHeight = 0,imgBoxWidth = 0;
			//圖片的實際高寬
			var imgHeight = 0;
			var imgWidth = 0;
			//加載圖片高度寬度
			imgReady(url,function(){
				imgHeight = this.height;
				imgWidth = this.width;
				if(imgHeight > 0 && imgWidth > 0){
					widthScale = containerWidth / imgWidth;
					heightScale = containerHeight / imgHeight;
				}
				if(widthScale >= heightScale){
					scale = heightScale;
				}else{
					scale = widthScale;
				}
				imgBoxHeight = Math.round(scale * imgHeight);
				imgBoxWidth = Math.round(scale * imgWidth);
				$("#bgDiv").width(imgBoxWidth);
				$("#bgDiv").height(imgBoxHeight);
				$("#bgDiv").css("margin-left",-imgBoxWidth / 2);
				$("#bgDiv").css("margin-top",-imgBoxHeight / 2);
				$("#bgDiv").css("display","block");

				var dragDivHtmlStr = ''+
										'<div id="dragDiv">'+
										  '<div id="rRightDown"> </div>'+
										  '<div id="rLeftDown"> </div>'+
										  '<div id="rRightUp"> </div>'+
										  '<div id="rLeftUp"> </div>'+
										  '<div id="rRight"> </div>'+
										  '<div id="rLeft"> </div>'+
										  '<div id="rUp"> </div>'+
										  '<div id="rDown"></div>'+
										'</div>';
				var dragDivObj = $(dragDivHtmlStr);
				$("#bgDiv").html("");
				$("#bgDiv").append(dragDivObj);
				//移除原有的img標籤
				$("#bgDiv").find("img").remove();
				$("#viewDiv").find("img").remove();
				ic = new ImgCropper("bgDiv", "dragDiv", url, {
					Width: imgBoxWidth, Height: imgBoxHeight , Color: "#FFF",
					Resize: true,
					Right: "rRight", Left: "rLeft", Up:	"rUp", Down: "rDown",
					RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
					Preview: "viewDiv", viewWidth: 160, viewHeight: 160
				});

			});

		}
		function showImgView(){
			$("#portraitLoad2").css("display","none");
			var url = backImage.url;
			var containerWidth = 400;
			var containerHeight = 300;
			var widthScale = 1.0 ,heightScale = 1.0;

			var imgBoxHeight = 0,imgBoxWidth = 0;
			//圖片的實際高寬
			var imgHeight = 0;
			var imgWidth = 0;
			//加載圖片高度寬度
			imgReady(url,function(){
				imgHeight = this.height;
				imgWidth = this.width;
				if(imgHeight > 0 && imgWidth > 0){
					widthScale = containerWidth / imgWidth;
					heightScale = containerHeight / imgHeight;
				}
				if(widthScale >= heightScale){
					scale = heightScale;
				}else{
					scale = widthScale;
				}
				imgBoxHeight = Math.round(scale * imgHeight);
				imgBoxWidth = Math.round(scale * imgWidth);
				$("#imgView").width(imgBoxWidth);
				$("#imgView").height(imgBoxHeight);
				$("#imgView").css("margin-left",-imgBoxWidth / 2);
				$("#imgView").css("margin-top",-imgBoxHeight / 2);
				$("#imgView").css("display","block");
				$("#imgView").html("");
				var img = $("<img src=''/>");
				img.attr("height",imgBoxHeight);
				img.attr("width",imgBoxWidth);
				img.attr("src",url);
				$("#imgView").append(img);
			});
		}
		function showPromptInfo(errno,msg){
			if(!msg){
				msg = msgObj[errno];
			}
			if(tabFlag == 0){
				$("#msg_content1").find("span").text(msg);
				$("#msg_content1").find("i").removeClass();
				$("#msg_content1").find("i").addClass("msg_icon");
				if(errno == msgObj.successErrno){
					$("#msg_content1").find("i").addClass("msg_icon_ok");
				}else if(errno == msgObj.errnoErrno){
					$("#msg_content1").find("i").addClass("msg_icon_warning");
				}else{
					$("#msg_content1").find("i").addClass("msg_icon_info");
				}
				$("#msg_content1").css("display","block");
				setTimeout("hiddenDiv('msg_content1')",1000);
			}else{
				$("#msg_content2").find("span").text(msg);
				$("#msg_content2").find("i").removeClass();
				$("#msg_content2").find("i").addClass("msg_icon");
				if(errno == msgObj.successErrno){
					$("#msg_content2").find("i").addClass("msg_icon_ok");
				}else if(errno == msgObj.errnoErrno){
					$("#msg_content2").find("i").addClass("msg_icon_warning");
				}else{
					$("#msg_content2").find("i").addClass("msg_icon_info");
				}
				$("#msg_content2").css("display","block");
				setTimeout("hiddenDiv('msg_content2')",1000);
			}
		}
		function hiddenDiv(divId){
			$("#"+divId).css("display","none");
		}
		//驗證圖片格式必須爲jpg|jpeg|gif|png|bmp
		function validateImg (j) {
			h = j.value || '';
			if (/^.*?\.(jpg|jpeg|gif|png|bmp)$/.test(h.toLowerCase())) {
			  return true;
			} else {
			  showPromptInfo(msgObj.errnoErrno, msgObj.errImgMsg);
			  return false;
			}
		}
		//js代碼
		$(document).ready(function(){
			//點擊頁籤切換內容
			$(".tab_nav_li").click(function(){
				var contentId  = $(this).attr("cid");
				if($(this).attr("id") && $(this).attr("id").indexOf("1") != -1){
					tabFlag = 0 ;
				}else{
					tabFlag = 1;
				}
				$(".tab_content").css("display","none");
				$(".tab_nav_li").removeClass("tab_nav_cuur");
				$(this).addClass("tab_nav_cuur");
				$("#"+contentId).css("display","block");
			});
			$("#clip_ok").click(function(){
				if(!$(this).hasClass("okPortraitBtn_disable")){
					var clipWidth = 0 , clipHeight = 0;
					var clipTop = 0 , clipLeft = 0;
					if(ic){
						var posObj = ic.GetPos();
						clipTop = Math.round(posObj.Top / scale);
						clipLeft = Math.round(posObj.Left / scale);
						clipWidth = Math.round(posObj.Width / scale);
						clipHeight = Math.round(posObj.Height / scale);
						if(clipWidth < 1 || clipHeight < 1 ){
							showPromptInfo(2,"");
						}else{
							var picId = backImage.id;
							var clipSubmitData = {attachId:picId,x:clipLeft,y:clipTop,width:clipWidth,height:clipHeight};
							$.post(requestObj.clipAction, clipSubmitData, function(data){
								if(data){
									backImage.clipUrl = decodeURIComponent(decodeURIComponent(data.url));
									showPromptInfo(data.errno,"");
									$("#testImg").attr("src",backImage.clipUrl);
								}
							});
						}
					}else{
						showPromptInfo(5,"請先選擇需要剪切的圖片");
					}
				}
			});
			$("#upload_ok").click(function(){
				//判斷是否有
				if(!$(this).hasClass("okPortraitBtn_disable")){
					showPromptInfo(0,"圖片已保存");
					$("#testImg").attr("src",backImage.clipUrl);
				}
			});
			$(".portraitLoad").css("display","none");
			$(".okPortraitBtn").addClass("okPortraitBtn_disable");
		});
	</script>
  </head>
  <body>
<div class="passPortraitWrapper">
	<div class="tab_wrap">
		<div class="tab_nav_group">
			<ul class="tab_nav_ul">
				<li  class="tab_nav_li tab_nav_cuur" id="tab_1" cid="clip_img">圖片剪切</li>
				<li  class="tab_nav_li" id="tab_2" cid="upload_img">圖片上傳</li>
			</ul>
		</div>
		<div class="tab_content_group">
			<div class="tab_content" style="display:block;" id="clip_img">
				<div  class="passPortraitBox">
						<div  class="passPortraitLeftSide">
							<div  class="selectPortaitLabel">
								<input type="file" name="file" id="fileImg" class="portraitFile"  onchange="uploadImg(this)"/>
								<input type="button"  class="portraitBtn selectPortraitBtn" id="file_btn1" value="選擇圖片" onclick=""/>
								<span  class="selectPortaitNote">支持jpg、jpeg、gif、png、bmp格式的圖片</span>
							</div>
							<div  id="imgPath" class="portraitFilePath"></div>
							<div  class="portraitBox">
								<div  class="portraitBG">
									<div id="portraitLoad1"  class="portraitLoad" >
										<img src="${ctxPath}/resources/images/loading/zoomloader.gif" height="16" width="16" />
									</div>
								  	<div style="display:none;" class="portraitPosition" id="bgDiv">
									</div>
								</div>
							</div>
							<div  class="okPortraitLabel" >
								<input type="button"   id="clip_ok" value="確定" class="portraitBtn okPortraitBtn okPortraitBtn_disable"/>
								<span class="msg_content" id="msg_content1" ><i class="msg_icon" ></i><span></span></span>
							</div>
						</div>
						<div  class="passPortraitRightSide">
							<div  class="portraitPreviewBox">
								<div class="portraitPreviewLabel">頭像預覽</div>
								<div  class="portraitPreviewContent" id="viewDiv"></div>
							</div>
						</div>
				</div>
			</div>
			<div class="tab_content" style="display:none;" id="upload_img">
				<div style="margin:0px auto;width:400px;padding:10px;">
					<div  class="selectPortaitLabel">
						<input type="file" name="file" id="fileImg2" class="portraitFile"  onchange="uploadImg(this)"/>
						<input type="button"  class="portraitBtn selectPortraitBtn" id="file_btn2" value="選擇圖片" onclick=""/>
						<span  class="selectPortaitNote">支持jpg、jpeg、gif、png、bmp格式的圖片</span>
					</div>
					<div class="imgViewBG" >
						<div id="portraitLoad2"  class="portraitLoad" >
								<img src="${ctxPath}/resources/images/loading/zoomloader.gif" height="16" width="16" />
						</div>
						<div id="imgView" style="display:none;position:absolute;z-index:200;background:#fff;left:50%;top:50%;"></div>
					</div>
					<div  class="okPortraitLabel">
							<input type="button"  value="確定" id="upload_ok"  class="portraitBtn okPortraitBtn okPortraitBtn_disable"/>
							<span class="msg_content" id="msg_content2" ><i class="msg_icon" ></i><span></span></span>
					</div>
				</div>
			</div>

		</div>
	</div>
		<div class="portraitParmDiv">

		</div>
	</div>
	<div style="clear:both;">
		<img src="" id="testImg" />
	</div>
	<script type="text/javascript">
/* 		var ic = new ImgCropper("bgDiv", "dragDiv", "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg", {
			Width: 224, Height: 300, Color: "#000",
			Resize: true,
			Right: "rRight", Left: "rLeft", Up:	"rUp", Down: "rDown",
			RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
			Preview: "viewDiv", viewWidth: 160, viewHeight: 160
		}); */
	</script>
  </body>
</html>

3.由於上傳圖片成功後，頁面需要重新計算圖片的高寬，保證能放入400*300的div中，還是用一個計算圖片高寬的imgReady插件，源碼來至於網絡

代碼如下：

// 更新：
// 05.27: 1、保證回調執行順序：error > ready > load；2、回調函數this指向img本身
// 04-02: 1、增加圖片完全加載後的回調 2、提高性能

/**
 * 圖片頭數據加載就緒事件 - 更快獲取圖片尺寸
 * @version 2011.05.27
 * @see     http://blog.phpdr.net/js-get-image-size.html
 * @param   {String}    圖片路徑
 * @param   {Function}  尺寸就緒
 * @param   {Function}  加載完畢 (可選)
 * @param   {Function}  加載錯誤 (可選)
 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
        alert('size ready: width=' + this.width + '; height=' + this.height);
    });
 */
var imgReady = (function () {
    var list = [], intervalId = null,

    // 用來執行隊列
    tick = function () {
        var i = 0;
        for (; i < list.length; i++) {
            list[i].end ? list.splice(i--, 1) : list[i]();
        };
        !list.length && stop();
    },

    // 停止所有定時器隊列
    stop = function () {
        clearInterval(intervalId);
        intervalId = null;
    };

    return function (url, ready, load, error) {
        var onready, width, height, newWidth, newHeight,
            img = new Image();

        img.src = url;

        // 如果圖片被緩存，則直接返回緩存數據
        if (img.complete) {
            ready.call(img);
            load && load.call(img);
            return;
        };

        width = img.width;
        height = img.height;

        // 加載錯誤後的事件
        img.onerror = function () {
            error && error.call(img);
            onready.end = true;
            img = img.onload = img.onerror = null;
        };

        // 圖片尺寸就緒
        onready = function () {
            newWidth = img.width;
            newHeight = img.height;
            if (newWidth !== width || newHeight !== height ||
                // 如果圖片已經在其他地方加載可使用面積檢測
                newWidth * newHeight > 1024
            ) {
                ready.call(img);
                onready.end = true;
            };
        };
        onready();

        // 完全加載完畢的事件
        img.onload = function () {
            // onload在定時器時間差範圍內可能比onready快
            // 這裏進行檢查並保證onready優先執行
            !onready.end && onready();

            load && load.call(img);

            // IE gif動畫會循環執行onload，置空onload即可
            img = img.onload = img.onerror = null;
        };

        // 加入隊列中定期執行
        if (!onready.end) {
            list.push(onready);
            // 無論何時只允許出現一個定時器，減少瀏覽器性能損耗
            if (intervalId === null) intervalId = setInterval(tick, 40);
        };
    };
})();

4.下面就是java服務端的servlet代碼，服務端實現上傳使用commons-fileupload-1.2.2.jar，commons-io-2.0.1.jar

下面是servlet的代碼：

package com.wqjweb.controller;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.json.simple.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import com.wqjweb.entry.Attachment;
import com.wqjweb.service.AttachmentService;
import com.wqjweb.util.date.DateUtil;
import com.wqjweb.util.file.FileUtil;
import com.wqjweb.util.image.ImgCutUtil;
import com.wqjweb.util.string.IDGenerator;
import com.wqjweb.util.string.StringUtil;
@Controller
public class UploadAttachController extends AutowiredHttpServlet {
	/**
	 *
	 */
	private static final long serialVersionUID = 1L;
	@Autowired
	private AttachmentService attachmentService;
	private ServletContext ctx;
	private String savePath;
	@Override
	public void init(ServletConfig config) throws ServletException {
		// 在web.xml中設置的一個初始化參數
		savePath = config.getInitParameter("savePath");
		ctx = config.getServletContext();
		super.init(config);
	}
	/**
	 * @return the attachmentService
	 */
	public AttachmentService getAttachmentService() {
		return attachmentService;
	}

	/**
	 * @param attachmentService the attachmentService to set
	 */
	public void setAttachmentService(AttachmentService attachmentService) {
		this.attachmentService = attachmentService;
	}

	@Override
	public void servlet(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		String action = StringUtil.trimStr(request.getParameter("action"));
		if("uploadAction".equals(action)){
			this.uploadAction(request, response);
		}else if("test".equals(action)){
			this.testResponse(request, response);
		}else if("uploadAttach".equals(action)){
			this.uploadAttach(request, response);
		}else if("getAttachFile".equals(action)){
			this.getAttachFile(request, response);
		}else if("getImageFile".equals(action)){
			this.getImageFile(request, response);
		}else if("testURLDecoder".equals(action)){
			this.testURLDecoder(request, response);
		}else if("clipImg".equals(action)){
			this.clipImg(request, response);
		}
	}

	private void uploadAction(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {

		DiskFileItemFactory factory = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(factory);
		try{
			List<FileItem> fileItemList = upload.parseRequest(request);
			Iterator<FileItem> fileItemIter = fileItemList.iterator();
			while(fileItemIter.hasNext()){
				FileItem fileItem = fileItemIter.next();
				//判斷是否表單提交的參數
				if(fileItem.isFormField()){
					System.out.println("表單參數名:"+fileItem.getFieldName()+"屬性值："+fileItem.getString("utf-8"));
				}else{
					if(!"".equals(fileItem.getName())){
						System.out.println("文件大小："+fileItem.getSize());
						System.out.println("文件類型："+fileItem.getContentType());
						System.out.println("文件名稱："+fileItem.getName());
						String rootPath = ctx.getRealPath("/");
						System.out.println("項目根目錄："+rootPath);
						File tempFile = new File(rootPath+savePath,fileItem.getName());
						//判斷父目錄是否存在，不存在就創建
						mkdir(tempFile.getParentFile());
						fileItem.write(tempFile);
						request.setAttribute("uploadMsg", "上傳文件成功！");
						System.out.println("上傳成功！");
					}else{
						request.setAttribute("uploadMsg", "沒有選擇上傳文件！");
						System.out.println("沒有選擇上傳文件！");
					}
				}
			}
		}catch(Exception e){
			e.printStackTrace();
			request.setAttribute("uploadMsg", "上傳文件失敗！");
		}
		Attachment attachment = new Attachment();
		attachment.setAttachName("測試2");
		attachment.setAttachPath("F:\\CC.txt");
		attachment.setAttachSize(20);
		attachment.setAttachSuffix("txt");
		attachment.setCreateDate(DateUtil.getCurrDateStr());
		attachment.setId(IDGenerator.getUniqueID());
		attachment.setUserId(IDGenerator.getUniqueID());
		int count = attachmentService.save(attachment);
		System.out.println("path:"+savePath);
		System.out.println("count:"+count);
		JSONObject jsonObj = new JSONObject();
		jsonObj.put("code", "100");
		jsonObj.put("msg", "上傳成功！");
		System.out.println(jsonObj.toString());
		response.getWriter().write(jsonObj.toString());
	}
	private void testURLDecoder(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		String testStr = StringUtil.trimStr(request.getParameter("testStr"));
		System.out.println(testStr);
		System.out.println(new String(testStr.getBytes("ISO8859_1"),"UTF-8"));
		System.out.println(URLDecoder.decode(testStr, "ISO8859_1"));
		System.out.println(URLDecoder.decode(testStr, "UTF-8"));
	}
	private void uploadAttach(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		DiskFileItemFactory factory = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(factory);
		JSONObject resultJson = new JSONObject();

		try{
			List<FileItem> fileItemList = upload.parseRequest(request);
			Iterator<FileItem> fileItemIter = fileItemList.iterator();
			while(fileItemIter.hasNext()){
				FileItem fileItem = fileItemIter.next();
				//判斷是否表單提交的參數
				if(fileItem.isFormField()){
					System.out.println("表單參數名:"+fileItem.getFieldName()+"屬性值："+fileItem.getString("utf-8"));
				}else{
					if(!"".equals(fileItem.getName())){
						System.out.println("文件大小："+fileItem.getSize());
						System.out.println("文件類型："+fileItem.getContentType());
						System.out.println("文件名稱："+fileItem.getName());
						//表單上傳的文檔名稱
						String pathName = fileItem.getName();
						String fileFullName = FileUtil.getFileFullName(pathName);
						String fileSimpleName = fileFullName;
						if(!"".equals(FileUtil.getFileSimpleName(fileFullName))){
							fileSimpleName = FileUtil.getFileSimpleName(fileFullName);
						}
						String rootPath = ctx.getRealPath("/");
						String filePath = rootPath+savePath + File.separator + fileFullName;
						System.out.println("文件路徑："+filePath);
						File tempFile = new File(filePath);
						Attachment attachment = new Attachment();
						attachment.setId(IDGenerator.getUniqueID());
						attachment.setAttachName(fileSimpleName);
						attachment.setAttachSuffix(FileUtil.getFileSuffix(fileFullName));
						attachment.setAttachPath(filePath);
						attachment.setCreateDate(DateUtil.getCurrDateStr());
						attachment.setUserId("10000");
						attachment.setAttachSize((int)fileItem.getSize());
						//判斷父目錄是否存在，不存在就創建
						mkdir(tempFile.getParentFile());
						fileItem.write(tempFile);
						int resultCount = this.attachmentService.save(attachment);
						if(resultCount > 0 ){
							resultJson.put("errno", "0");
							String portraitUrl  = request.getContextPath()+"/uploadController?action=getImageFile&attachId="+attachment.getId();
							try{
								portraitUrl = URLEncoder.encode(portraitUrl,"UTF-8");
							}catch(Exception e2){}
							resultJson.put("picId", attachment.getId());
							resultJson.put("portraitUrl", portraitUrl);

						}else{
							resultJson.put("errno", "5");
						}
					}
				}
			}
		}catch(Exception e){
			e.printStackTrace();
			resultJson.put("errno", "4");

		}
		System.out.println(resultJson.toString());
		renderHtml(response, resultJson.toString());
	}
	private void uploadAttachToJpg(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		DiskFileItemFactory factory = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(factory);
		JSONObject resultJson = new JSONObject();

		try{
			List<FileItem> fileItemList = upload.parseRequest(request);
			Iterator<FileItem> fileItemIter = fileItemList.iterator();
			while(fileItemIter.hasNext()){
				FileItem fileItem = fileItemIter.next();
				//判斷是否表單提交的參數
				if(fileItem.isFormField()){
					System.out.println("表單參數名:"+fileItem.getFieldName()+"屬性值："+fileItem.getString("utf-8"));
				}else{
					if(!"".equals(fileItem.getName())){
						System.out.println("文件大小："+fileItem.getSize());
						System.out.println("文件類型："+fileItem.getContentType());
						System.out.println("文件名稱："+fileItem.getName());
						//表單上傳的文檔名稱
						String pathName = fileItem.getName();
						String fileFullName = FileUtil.getFileFullName(pathName);
						String fileSimpleName = fileFullName;
						if(!"".equals(FileUtil.getFileSimpleName(fileFullName))){
							fileSimpleName = FileUtil.getFileSimpleName(fileFullName);
						}
						String rootPath = ctx.getRealPath("/");
						String filePath = rootPath+savePath + File.separator + fileFullName;
						System.out.println("文件路徑："+filePath);
						File tempFile = new File(filePath);
						Attachment attachment = new Attachment();
						attachment.setId(IDGenerator.getUniqueID());
						attachment.setAttachName(fileSimpleName);
						attachment.setAttachSuffix(FileUtil.getFileSuffix(fileFullName));
						attachment.setAttachPath(filePath);
						attachment.setCreateDate(DateUtil.getCurrDateStr());
						attachment.setUserId("10000");
						attachment.setAttachSize((int)fileItem.getSize());
						//判斷父目錄是否存在，不存在就創建
						mkdir(tempFile.getParentFile());
						fileItem.write(tempFile);
						int resultCount = this.attachmentService.save(attachment);
						if(resultCount > 0 ){
							resultJson.put("errno", "0");
							String portraitUrl  = request.getContextPath()+"/uploadController?action=getImageFile&attachId="+attachment.getId();
							try{
								portraitUrl = URLEncoder.encode(portraitUrl,"UTF-8");
							}catch(Exception e2){}
							resultJson.put("picId", attachment.getId());
							resultJson.put("portraitUrl", portraitUrl);

						}else{
							resultJson.put("errno", "5");
						}
					}
				}
			}
		}catch(Exception e){
			e.printStackTrace();
			resultJson.put("errno", "4");
		}
		System.out.println(resultJson.toString());
		renderHtml(response, resultJson.toString());
	}
	private void clipImg(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		String attachId = StringUtil.trimStr(request.getParameter("attachId"));
		int x = StringUtil.obj2Int(StringUtil.trimStr(request.getParameter("x")), 0);
		int y = StringUtil.obj2Int(StringUtil.trimStr(request.getParameter("y")), 0);
		int width = StringUtil.obj2Int(StringUtil.trimStr(request.getParameter("width")), 0);
		int height = StringUtil.obj2Int(StringUtil.trimStr(request.getParameter("height")), 0);
		JSONObject resultJson = new JSONObject();
		Attachment attachment = this.attachmentService.findByAttachId(attachId);
		if(null != attachment){
			String id = attachment.getId();
			String outFilePath  = attachment.getAttachPath();
			String suffix = attachment.getAttachSuffix();
			String attachmentParentPath = FileUtil.getParentPath(outFilePath);
			String clipSimpleName  = id + "_clip";
			String clipFilePath = attachmentParentPath + File.separator + clipSimpleName + "."+ suffix;
			Attachment clipAttach = new Attachment();
			clipAttach.setId(IDGenerator.getUniqueID());
			clipAttach.setAttachName(clipSimpleName);
			clipAttach.setAttachSuffix(suffix);
			clipAttach.setAttachPath(clipFilePath);
			clipAttach.setCreateDate(DateUtil.getCurrDateStr());
			clipAttach.setUserId("10000");
			ImgCutUtil.cut(outFilePath, clipFilePath, x, y, width, height);
			int clipFileSize = (int) FileUtil.getFileSize(clipFilePath);
			clipAttach.setAttachSize(clipFileSize);
			int resultCount = this.attachmentService.save(clipAttach);
			if(resultCount > 0){
				resultJson = this.getMsgJson(0, "success", null, null);
				String url  = request.getContextPath()+"/uploadController?action=getImageFile&attachId="+clipAttach.getId();
				try{
					url = URLEncoder.encode(url,"UTF-8");
				}catch(Exception e2){}
				resultJson.put("errno", 1);
				resultJson.put("url", url);
				resultJson.put("clipId", clipAttach.getId());
			}else{
				resultJson.put("errno", 5);
			}
			renderJson(response, resultJson.toString());
		}
	}
	private void getAttachFile(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		String attachId = StringUtil.trimStr(request.getParameter("attachId"));
		Attachment attachment = this.attachmentService.findByAttachId(attachId);
		if(null != attachment){
			String outFilePath  = attachment.getAttachPath();
			String outFileName = attachment.getAttachName();
			outFileName += "." + attachment.getAttachSuffix();
			File outFile = new File(outFilePath);
			if(outFile.exists()){
				response.reset();
				//清除緩衝數據
				response.reset();
				//設置編碼形式
				response.setCharacterEncoding("UTF-8");
				//輸出類型字節流
				response.setContentType("application/x-msdownload");
				//設置內容描述,設置爲附件,設置文件名URLEncoder.encode(filename.substring(filename.lastIndexOf("/")+1),"UTF-8")
				response.setHeader("Content-Disposition", "attachment;filename=" +new String(outFileName.replaceAll("[/\\\\|:*?<>]", "").getBytes("GBK"), "ISO8859_1"));
				BufferedInputStream bis = new BufferedInputStream(new FileInputStream(outFile));
				OutputStream  toClient = response.getOutputStream();
				BufferedOutputStream bos = new BufferedOutputStream(toClient);
				byte[] buffer = new byte[1024];
				int read = 0;
				//循環寫數據到客戶端
				while((read = bis.read(buffer)) != -1){
					bos.write(buffer, 0, read);
				}
				bos.flush();
				//關閉輸入輸出流
				bos.close();
				bis.close();
			}

		}

	}
	private void getImageFile(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		String attachId = StringUtil.trimStr(request.getParameter("attachId"));
		Attachment attachment = this.attachmentService.findByAttachId(attachId);
		if(null != attachment){
			String outFilePath  = attachment.getAttachPath();
			String outFileName = attachment.getAttachName();
			outFileName += "." + attachment.getAttachSuffix();
			File outFile = new File(outFilePath);
			if(outFile.exists()){
				response.reset();
				//清除緩衝數據
				response.reset();
				//設置編碼形式
				response.setCharacterEncoding("UTF-8");
				// 設置響應的類型格式爲圖片格式
				response.setContentType("image/jpeg");
				//禁止圖像緩存。
				response.setHeader("Pragma", "no-cache");
				response.setHeader("Cache-Control", "no-cache");
				response.setDateHeader("Expires", 0);
				/*//設置內容描述,設置爲附件,設置文件名URLEncoder.encode(filename.substring(filename.lastIndexOf("/")+1),"UTF-8")
				response.setHeader("Content-Disposition", "attachment;filename=" +new String(outFileName.replaceAll("[/\\\\|:*?<>]", "").getBytes("GBK"), "ISO8859_1"));*/
				BufferedInputStream bis = new BufferedInputStream(new FileInputStream(outFile));
				OutputStream  toClient = response.getOutputStream();
				BufferedOutputStream bos = new BufferedOutputStream(toClient);
				byte[] buffer = new byte[1024];
				int read = 0;
				//循環寫數據到客戶端
				while((read = bis.read(buffer)) != -1){
					bos.write(buffer, 0, read);
				}
				bos.flush();
				//關閉輸入輸出流
				bos.close();
				bis.close();
			}

		}

	}
	private void testResponse(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		JSONObject testJson = new JSONObject();
		testJson.put("code", "12345");
		testJson.put("error", "錯誤提示信息");
/*		renderHtml(response,"<br/><h2>我是打印的html</h2>");
		renderText(response, "<br/>我<b>是</b>打印的純文本<br/>");*/
		renderJson(response, testJson.toJSONString());
	}

	/**
	 *  創建目錄
	 * @param dir 需要創建的目錄
	 */
	public static void mkdir(File dir){
		if(null == dir) return;
		if(!dir.exists()){
			mkdir(dir.getParentFile());
			dir.mkdir();
		}
	}
}

serlvet的父類：

package com.wqjweb.controller;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONObject;
import org.springframework.beans.factory.config.AutowireCapableBeanFactory;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;

public abstract class AutowiredHttpServlet extends HttpServlet {

    private static final long serialVersionUID = -2000909174467653847L;

    public void init() throws ServletException {
        super.init();
        WebApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(getServletContext());
        AutowireCapableBeanFactory factory = ctx.getAutowireCapableBeanFactory();
        //使其子類支持自動注入bean
        factory.autowireBean(this);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException{
        servlet(request, response);
    }

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException{
        servlet(request, response);
    }

    /**
     * 子類實現該方法，進行Servlet Post和Get請求服務。
     * @param request HttpServletRequest實例
     * @param response HttpServletResponse實例
     * @throws IOException
     * @throws ServletException
     * @author yinlei
     * date 2011-8-9 下午7:15:41
     */
    public abstract void servlet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException;

    /**
     * 直接輸出json。
     */
    public void renderJson(HttpServletResponse response, String json) {
        response(response, json, "application/json;charset=UTF-8");
    }

    /**
     * 直接輸出純HTML。
     */
    public void renderHtml(HttpServletResponse response, String text) {
        response(response, text, "text/html;charset=UTF-8");
    }

    /**
     * 直接輸出純字符串。
     */
    public void renderText(HttpServletResponse response, String text) {
        response(response, text, "text/plain;charset=UTF-8");
    }

    public void response(HttpServletResponse response, String text, String contentType) {
        try {
            response.setContentType(contentType);
            response.getWriter().write(text);
        } catch (IOException e) {

        }
    }
    public JSONObject getMsgJson(int code ,String msg,String script,String id){
    	JSONObject jsonObj = new JSONObject();
    	jsonObj.put("code", code);
    	jsonObj.put("msg", msg);
    	jsonObj.put("script", script);
    	jsonObj.put("id", id);
    	return jsonObj;
    }
}

ImgCutUtil代碼：

package com.wqjweb.util.image;

import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Iterator;

import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;

public class ImgCutUtil{

    // JGP格式
    public static final String JPG = "jpeg";
    // GIF格式
    public static final String GIF = "gif";
    // PNG格式
    public static final String PNG = "png";
    // BMP格式
    public static final String BMP = "bmp";
    /**
     *  對圖片裁剪，並把裁剪完蛋新圖片保存 。
     * @param srcpath   源圖片路徑
     * @param subpath   剪切圖片存放路徑
     * @param x         剪切點x座標
     * @param y         剪切點y座標
     * @param width     剪切寬度
     * @param height    剪切高度
     * @throws IOException
     */
    public static void cut(String srcpath,String subpath,int x,int y,int width,int height) throws IOException{

        FileInputStream is = null ;
        ImageInputStream iis =null ;

        try{
            //讀取圖片文件
            is = new FileInputStream(srcpath);

            /**//*
             * 返回包含所有當前已註冊 ImageReader 的 Iterator，這些 ImageReader
             * 聲稱能夠解碼指定格式。 參數：formatName - 包含非正式格式名稱 .
             *（例如 "jpeg" 或 "tiff"）等 。
             */
            String suffix = srcpath.substring(srcpath.lastIndexOf(".")+1);
            String fromatName1  = JPG;
            if("gif".equals(suffix)){
            	fromatName1 = GIF;
            }else if("jpg".equals(suffix)){
            	fromatName1 = JPG;
            }else if("png".equals(suffix)){
            	fromatName1 = PNG;
            }else if ("bmp".equals(suffix)){
            	fromatName1 = BMP;
            }
            String suffix2 = subpath.substring(subpath.lastIndexOf(".")+1);
            String formatName = JPG;
            if("gif".equals(suffix2)){
            	formatName = GIF;
            }else if("jpg".equals(suffix2)){
            	formatName = JPG;
            }else if("png".equals(suffix2)){
            	formatName = PNG;
            }else if ("bmp".equals(suffix2)){
            	formatName = BMP;
            }

            Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(fromatName1);
            ImageReader reader = it.next();
            //獲取圖片流
            iis = ImageIO.createImageInputStream(is);

            /**//*
             * <p>iis:讀取源.true:只向前搜索 </p>.將它標記爲 ‘只向前搜索’。
             * 此設置意味着包含在輸入源中的圖像將只按順序讀取，可能允許 reader
             *  避免緩存包含與以前已經讀取的圖像關聯的數據的那些輸入部分。
             */
            reader.setInput(iis,true) ;

            /**//*
             * <p>描述如何對流進行解碼的類<p>.用於指定如何在輸入時從 Java Image I/O
             * 框架的上下文中的流轉換一幅圖像或一組圖像。用於特定圖像格式的插件
             * 將從其 ImageReader 實現的 getDefaultReadParam 方法中返回
             * ImageReadParam 的實例。
             */
            ImageReadParam param = reader.getDefaultReadParam();

            /**//*
             * 圖片裁剪區域。Rectangle 指定了座標空間中的一個區域，通過 Rectangle 對象
             * 的左上頂點的座標（x，y）、寬度和高度可以定義這個區域。
             */
            Rectangle rect = new Rectangle(x, y, width, height);


            //提供一個 BufferedImage，將其用作解碼像素數據的目標。
            param.setSourceRegion(rect);

            /**//*
             * 使用所提供的 ImageReadParam 讀取通過索引 imageIndex 指定的對象，並將
             * 它作爲一個完整的 BufferedImage 返回。
             */
            BufferedImage bi = reader.read(0,param);

            //保存新圖片
            ImageIO.write(bi, formatName, new File(subpath));
        }

        finally{
            if(is!=null)
               is.close() ;
            if(iis!=null)
               iis.close();
        }



    }
    public static void main(String[] args) {
    	try {
			ImgCutUtil.cut("F:\\Workspaces\\elcipse_vdp_back\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp0\\wtpwebapps\\UploadPicDemo\\file\\"+"battery.png", "F:\\aa.png", 10, 0, 20, 20);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}


}

完整java項目demo下載點擊打開鏈接