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

由于项目需求在上传头像是需要使用异步上传文件,在上传的过程中需要对文件进行校验:规则如下:宽度和高 度大于200,宽高比要小于2,大小小于2M。

我这里使用的是

AjaxFileUploader

这个组件,服务器使用Struts处理文件

实例:

rush:xhtml;">
上传" id="shangchuan">

这里需要引入两个js文件:jQuery、ajaxfileUpload

rush:xhtml;">

js文件

rush: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 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,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");
//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>的后缀 
String[] strings = photoName.split("\\."); 
String hz = strings[1]; 

//构建<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名 
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上传头像)

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

相关文章

IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...