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上传头像)