jquery ajaxfileupload asynchronous upload plug in use details

Because the project needs to upload files asynchronously, it is necessary to check the files in the process of uploading: the rules are as follows: width and height
The degree is greater than 200, the aspect ratio is less than 2, and the size is less than 2M.

I use the AjaxFileUploader component here, and the server uses Struts to process files.

Example:

<form action="" id="imageForm" enctype="multipart/form-data" method="POST"> 
  <input type="file" name="userPhoto" id="userPhoto"> 
  <input type="button" value=" Upload " id="shangchuan"> 
</form> 

Two js files need to be introduced here: jQuery and 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 file:

// Upload avatar  
  $("#shangchuan").click(function(){ 
    var file = $("#userPhoto").val(); 
    if(file==""){ 
      alert(" Please select the uploaded avatar "); 
      return; 
    } 
    else{ 
      // Determine whether the uploaded file is in the correct format  
      var fileType = file.substring(file.lastIndexOf(".")+1); 
      if(fileType!="png"&&fileType!="jpg"){ 
        alert(" Upload file format error "); 
        return; 
      } 
      else{ 
        var url = "/symh/user/uploadPhoto_uploadPhoto.action?nowtime="+new Date().getTime(); 
        $.ajaxFileUpload({ 
          url:url, 
          secureuri:false, 
          fileElementId:"userPhoto",    //file Adj. id 
            dataType:"text",         // Returns a data type of text  
          success:function(data,status){ 
            if(data=="1"){ 
              alert(" Please upload a width greater than 200 Pixels and height are greater than 200 Pixel picture "); 
            } 
            else if(data=="2"){ 
              alert(" Please upload an aspect ratio not exceeding 2 Picture of "); 
            } 
            else if(data=="3"){ 
              alert(" Please upload a file size not greater than 2M Picture of "); 
            }   
            else{ 
              $("#uploadImage").hide(); 
              $("#srcImg").attr("src",data); 
              $("#previewImg").attr("src",data); 
              $("#cutImage").show(); 
              $("#bigImage").val(data); 
              cutImage();     // Capture an avatar  
            } 
          } 
        }) 
      } 
    } 
  }) 

Spooler: 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; 
  } 
 
  /** 
   *  User uploads images  
   */ 
  public void uploadPhoto(){ 
    try { 
      HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); 
      response.setCharacterEncoding("UTF-8"); 
       
      FileInputStream fis1 = new FileInputStream(getUserPhoto());     // Save a file  
      FileInputStream fis2 = new FileInputStream(getUserPhoto());    // Judgment file  
      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 {  // File correct, upload  
        // Get the file name  
        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);    
        }  
        // Processing file path , Easy to display in the foreground  
        String imagPathString = dealPath(getSavePath()+"\\"+photoName); 
        response.getWriter().print(imagPathString); 
         
      } 
    }  
    catch (IOException e) { 
      e.printStackTrace(); 
    } 
   
  } 
   
  /** 
   *  Rename the avatar name : User number + Head suffix  
   */ 
  public String getPhotoName(String photoName){ 
    // Get users  
    HttpServletRequest request = (HttpServletRequest) ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST); 
    UserBean userBean = (UserBean) request.getSession().getAttribute("userBean"); 
     
    // Get the suffix of the file  
    String[] strings = photoName.split("\\."); 
    String hz = strings[1]; 
     
    // Build file name  
    String fileName = userBean.getUserId()+"."+hz; 
    return fileName; 
  } 
   
  /** 
   *  Get Upload Path  
   */ 
  public String getSavePath(){ 
    return ServletActionContext.getServletContext().getRealPath("upload/photos"); 
  } 
   
  /** 
   *  Judge whether the uploaded avatar is legal or not  
   *  Rule: Width and height greater than 200 The aspect ratio is less than 2 , smaller than the size 2M 
   *  Width or height <200  Return 1 
   *  Aspect ratio >2  Return 2 
   *  Size greater than 2M  Return  3 
   *  Correct   Return  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; 
  } 
   
  /** 
   *  Processing avatar path  
   */ 
  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; 
  } 
} 

Here's how to upload files asynchronously using ajaxFileUpload. The following will explain how to intercept the avatar (similar to uploading the avatar on QQ)