jquery之ajaxfileupload异步上传插件

由于项目需求在上传头像是需要使用异步上传文件，在上传的过程中需要对文件进行校验：规则如下：宽度和高

度大于200，宽高比要小于2，大小小于2M。

我这里使用的是AjaxFileUploader这个组件，服务器使用Struts处理文件。

实例：

<form action="" id="imageForm" enctype="multipart/form-data" method="POST">
   	<input type="file" name="userPhoto" id="userPhoto">
   	<input type="button" value="上传" id="shangchuan">
</form>

这里需要引入两个js文件：jQuery、ajaxfileUpload

<script type="text/javascript" src="${basePath }/resource/js/plugin/jquery-1.6.min.js"></script>
 <script type="text/javascript" src="${basePath }/resource/js/grzx/ajaxfileupload.js"></script>

js文件：

//上传头像
	$("#shangchuan").click(function(){
		var file = $("#userPhoto").val();
		if(file==""){
			alert("请选择上传的头像");
			return;
		}
		else{
			//判断上传的文件的格式是否正确
  			var fileType = file.substring(file.lastIndexOf(".")+1);
  			if(fileType!="png"&&fileType!="jpg"){
  				alert("上传文件格式错误");
  				return;
  			}
			else{
				var url = "/symh/user/uploadPhoto_uploadPhoto.action?nowtime="+new Date().getTime();
  				$.ajaxFileUpload({
  					url:url,
  					secureuri:false,
  					fileElementId:"userPhoto",        //file的id
     					dataType:"text",                  //返回数据类型为文本
  					success:function(data,status){
  						if(data=="1"){
  				 			alert("请上传宽度大于200像素和高度大于200像素的图片");
  						}
  						else if(data=="2"){
  				 			alert("请上传宽高比不超过2的图片");
  						}
  						else if(data=="3"){
  				 			alert("请上传文件大小不大于2M的图片");
  						}	
  						else{
  				 			$("#uploadImage").hide();
  				 			$("#srcImg").attr("src",data);
  				 			$("#previewImg").attr("src",data);
  				 			$("#cutImage").show();
  				 			$("#bigImage").val(data);
  				 			cutImage();         //截取头像
  				 		}
  					}
				})
			}
		}
	})

后台处理程序：UploadPhotoAction.java

public class UploadPhotoAction {
	private File userPhoto;
	private String userPhotoContentType;
	private String userPhotoFileName;

	public File getUserPhoto() {
		return userPhoto;
	}

	public void setUserPhoto(File userPhoto) {
		this.userPhoto = userPhoto;
	}

	public String getUserPhotoContentType() {
		return userPhotoContentType;
	}

	public void setUserPhotoContentType(String userPhotoContentType) {
		this.userPhotoContentType = userPhotoContentType;
	}

	public String getUserPhotoFileName() {
		return userPhotoFileName;
	}

	public void setUserPhotoFileName(String userPhotoFileName) {
		this.userPhotoFileName = userPhotoFileName;
	}

	/**
	 * 用户上传图像
	 */
	public void uploadPhoto(){
		try {
			HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
			response.setCharacterEncoding("UTF-8");
			
			FileInputStream fis1 = new FileInputStream(getUserPhoto());         //保存文件
			FileInputStream fis2 = new FileInputStream(getUserPhoto());        //判断文件
			int i = this.checkImage(fis2);
			if(i==1){
				response.getWriter().print("1");
			}
			else if(i==2){
				response.getWriter().print("2");
			}
			else if(i==3){
				response.getWriter().print("3");
			}
			else {   //文件正确、上传
				//得到文件名
				String photoName = getPhotoName(getUserPhotoFileName());
				
				FileOutputStream fos = new FileOutputStream(getSavePath()+"\\"+photoName);
				byte[] buffer = new byte[1024];  
				int len = 0;  
				while ((len = fis1.read(buffer))>0) {  
				    fos.write(buffer,0,len);     
				}  
				//处理文件路径,便于在前台显示
				String imagPathString = dealPath(getSavePath()+"\\"+photoName);
				response.getWriter().print(imagPathString);
				
			}
		} 
		catch (IOException e) {
			e.printStackTrace();
		}
	
	}
	
	/**
	 * 重新命名头像名称:用户编号+头像后缀
	 */
	public String getPhotoName(String photoName){
		//获取用户
		HttpServletRequest request = (HttpServletRequest) ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
		UserBean userBean = (UserBean) request.getSession().getAttribute("userBean");
		
		//获取文件的后缀
		String[] strings = photoName.split("\\.");
		String hz = strings[1];
		
		//构建文件名
		String fileName = userBean.getUserId()+"."+hz;
		return fileName;
	}
	
	/**
	 * 获取上传路径
	 */
	public String getSavePath(){
		return ServletActionContext.getServletContext().getRealPath("upload/photos");
	}
	
	/**
	 * 判断上传的头像是否合法
	 * 规则：宽度和高度大于200、宽高比小于2、大小小于2M
	 * 宽度或者高度<200 返回1
	 * 宽高比>2 返回2
	 * 大小大于2M 返回 3
	 * 正确 返回 0
	 */
	public int checkImage(FileInputStream fis){
		try {
			BufferedImage image = ImageIO.read(fis);
			double width = image.getWidth();
			double height = image.getHeight();
			if(width<200||height<200){
				return 1;
			}
			else if(width/height>2){
				return 2;
			}
			else if(fis.available()/(1024*1024)>2){
				return 3;
			}
			else {
				return 0;
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
		return 1;
	}
	
	/**
	 * 处理头像路径
	 */
	public String dealPath(String path){
		String[] strings = path.split("\\\\");
		String string2 = "/";
		for (int i = strings.length-4; i < strings.length; i++) {
			if(i==strings.length-1){
				string2 = string2+strings[i];
			}
			else {
				string2 = string2+strings[i]+"/";
			}
				
		}
		return string2;
	}
}

这里就介绍使用ajaxFileUpload异步上传文件。下面将介绍如何截取头像(类似于QQ上传头像)