jquery中ajaxfileupload异步上传插件怎么用
这篇文章主要为大家展示了“jquery中ajaxfileupload异步上传插件怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery中ajaxfileupload异步上传插件怎么用”这篇文章吧。
创新互联专注骨干网络服务器租用10余年,服务更有保障!服务器租用,服务器托管 成都服务器租用,成都服务器托管,骨干网络带宽,享受低延迟,高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。
由于项目需求在上传头像是需要使用异步上传文件,在上传的过程中需要对文件进行校验:规则如下:宽度和高
度大于200,宽高比要小于2,大小小于2M。
我这里使用的是AjaxFileUploader这个组件,服务器使用Struts处理文件。
实例:
这里需要引入两个js文件:jQuery、ajaxfileUpload
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; } }
以上是“jquery中ajaxfileupload异步上传插件怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享名称:jquery中ajaxfileupload异步上传插件怎么用
标题来源:http://scyanting.com/article/igpppo.html