一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2022-06-25 17:17:12 编辑:袖梨 来源:一聚教程网

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

   * 宽度或者高度<200 返回1

   * 宽高比>2 返回2

   * 大小大于2M 返回 3

   * 正确 返回 0

   */

  publicintcheckImage(FileInputStream fis){

    try{

      BufferedImage image = ImageIO.read(fis);

      doublewidth = image.getWidth();

      doubleheight = image.getHeight();

      if(width<200||height<200){

        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 < strings.length; i++) {

      if(i==strings.length-1){

        string2 = string2+strings[i];

      }

      else{

        string2 = string2+strings[i]+"/";

      }

          

    }

    returnstring2;

  }

}

热门栏目