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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。