国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > 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()+"http://"+photoName);         byte[] buffer = new byte[1024];          int len = 0;          while ((len = fis1.read(buffer))>0) {            fos.write(buffer,0,len);            }          //處理文件路徑,便于在前臺顯示         String imagPathString = dealPath(getSavePath()+"http://"+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("http://.");     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("http:////");     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上傳頭像)

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 铅山县| 琼结县| 栖霞市| 区。| 灵寿县| 陕西省| 巴林右旗| 安新县| 吴旗县| 临安市| 山东省| 兴仁县| 龙陵县| 曲靖市| 荔波县| 上高县| 鄂托克前旗| 德江县| 阳信县| 且末县| 西安市| 交口县| 德州市| 南京市| 临邑县| 平顺县| 隆化县| 教育| 阿尔山市| 托克托县| 阳谷县| 永宁县| 定州市| 瓦房店市| 义马市| 通许县| 介休市| 义乌市| 岑巩县| 马尔康县| 巴林右旗|