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

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

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