首页 > 编程 > JavaScript > 正文

jquery ajaxfileupload异步上传插件使用详解

2019-11-19 17:41:23
字体:
来源:转载
供稿:网友

由于项目需求在上传头像是需要使用异步上传文件,在上传的过程中需要对文件进行校验:规则如下:宽度和高
度大于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上传头像)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表