jquery ajaxfileupload异步上传插件使用详解
由于项目需求在上传头像是需要使用异步上传文件，在上传的过程中需要对文件进行校验：规则如下：宽度和高
度大于200，宽高比要小于2，大小小于2M。
我这里使用的是AjaxFileUploader这个组件，服务器使用Struts处理文件。
实例：
| 代码如下 | 复制代码 |
|
|
|
这里需要引入两个js文件：jQuery、ajaxfileUpload
| 代码如下 | 复制代码 |
|
|
|
js文件：
| 代码如下 | 复制代码 |
|
//上传头像 $("#shangchuan").click(function(){ varfile = $("#userPhoto").val(); if(file==""){ alert("请选择上传的头像"); return; } else{ //判断上传的文件的格式是否正确 varfileType = file.substring(file.lastIndexOf(".")+1); if(fileType!="png"&&fileType!="jpg"){ alert("上传文件格式错误"); return; } else{ varurl ="/symh/user/uploadPhoto_uploadPhoto.action?nowtime="+newDate().getTime(); $.ajaxFileUpload({ url:url, secureuri:false, fileElementId:"userPhoto", //file的id dataType:"text", //返回数据类型为文本 success:function(data,status){ if(data=="1"){ alert("请上传宽度大于200像素和高度大于200像素的图片"); } elseif(data=="2"){ alert("请上传宽高比不超过2的图片"); } elseif(data=="3"){ alert("请上传文件大小不大于2M的图片"); } else{ $("#uploadImage").hide(); $("#srcImg").attr("src",data); $("#previewImg").attr("src",data); $("#cutImage").show(); $("#bigImage").val(data); cutImage(); //截取头像 } } }) } } }) |
|
后台处理程序：UploadPhotoAction.Java
| 代码如下 | 复制代码 |
|
publicclassUploadPhotoAction { privateFile userPhoto; privateString userPhotoContentType; privateString userPhotoFileName;
publicFile getUserPhoto() { returnuserPhoto; }
publicvoidsetUserPhoto(File userPhoto) { this.userPhoto = userPhoto; }
publicString getUserPhotoContentType() { returnuserPhotoContentType; }
publicvoidsetUserPhotoContentType(String userPhotoContentType) { this.userPhotoContentType = userPhotoContentType; }
publicString getUserPhotoFileName() { returnuserPhotoFileName; }
publicvoidsetUserPhotoFileName(String userPhotoFileName) { this.userPhotoFileName = userPhotoFileName; }
/** * 用户上传图像 */ publicvoiduploadPhoto(){ try{ HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); response.setCharacterEncoding("UTF-8");
FileInputStream fis1 =newFileInputStream(getUserPhoto()); //保存文件 FileInputStream fis2 =newFileInputStream(getUserPhoto()); //判断文件 inti =this.checkImage(fis2); if(i==1){ response.getWriter().print("1"); } elseif(i==2){ response.getWriter().print("2"); } elseif(i==3){ response.getWriter().print("3"); } else{ //文件正确、上传 //得到文件名 String photoName = getPhotoName(getUserPhotoFileName());
FileOutputStream fos =newFileOutputStream(getSavePath()+"\"+photoName); byte[] buffer =newbyte[1024]; intlen =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(); }
}
/** * 重新命名头像名称:用户编号+头像后缀 */ publicString 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; returnfileName; }
/** * 获取上传路径 */ publicString getSavePath(){ returnServletActionContext.getServletContext().getRealPath("upload/photos"); }
/** * 判断上传的头像是否合法 * 规则：宽度和高度大于200、宽高比小于2、大小小于2M * 宽度或者高度 * 宽高比>2 返回2 * 大小大于2M 返回 3 * 正确 返回 0 */ publicintcheckImage(FileInputStream fis){ try{ BufferedImage image = ImageIO.read(fis); doublewidth = image.getWidth(); doubleheight = image.getHeight(); if(width return1; } elseif(width/height>2){ return2; } elseif(fis.available()/(1024*1024)>2){ return3; } else{ return0; } }catch(IOException e) { e.printStackTrace(); } return1; }
/** * 处理头像路径 */ publicString dealPath(String path){ String[] strings = path.split("\\"); String string2 ="/"; for(inti = strings.length-4; i if(i==strings.length-1){ string2 = string2+strings[i]; } else{ string2 = string2+strings[i]+"/"; }
} returnstring2; } } |
|
