jquery ajaxfileupload異步上傳插件使用詳解
由于項目需求在上傳頭像是需要使用異步上傳文件,在上傳的過程中需要對文件進(jìn)行校驗:規(guī)則如下:寬度和高
度大于200,寬高比要小于2,大小小于2M。
我這里使用的是AjaxFileUploader這個組件,服務(wù)器使用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", //返回數(shù)據(jù)類型為文本 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]; //構(gòu)建文件名 String fileName = userBean.getUserId()+"."+hz; return fileName; } /** * 獲取上傳路徑 */ public String getSavePath(){ return ServletActionContext.getServletContext().getRealPath("upload/photos"); } /** * 判斷上傳的頭像是否合法 * 規(guī)則:寬度和高度大于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上傳頭像)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery ajaxfileupload異步上傳插件
- jQuery插件ajaxFileUpload異步上傳文件
- PHP結(jié)合jQuery插件ajaxFileUpload實現(xiàn)異步上傳文件實例
- jquery中的ajax異步上傳
- jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹
- JQuery插件ajaxfileupload.js異步上傳文件實例
- jQuery插件ajaxFileUpload實現(xiàn)異步上傳文件效果
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jquery之a(chǎn)jaxfileupload異步上傳插件(附工程代碼)
- jquery+ajax實現(xiàn)異步上傳文件顯示進(jìn)度條
相關(guān)文章
jQuery插件擴(kuò)展實例【添加回調(diào)函數(shù)】
這篇文章主要介紹了jQuery插件擴(kuò)展的方法,結(jié)合實例形式分析了jQuery插件添加回調(diào)函數(shù)與事件觸發(fā)機(jī)制的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11formStorage 基于jquery的一個插件(存儲表單中元素的狀態(tài)到本地)
原理很簡單,通過本地存儲機(jī)制(userData或者localStorage),存儲表單中元素的狀態(tài)到本地. 需要時可以把所存儲的狀態(tài)還原到表單元素上2012-01-01淺談jquery.form.js的ajaxSubmit和ajaxForm的使用
下面小編就為大家?guī)硪黄獪\談jquery.form.js的ajaxSubmit和ajaxForm的使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09詳解jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用
這篇文章主要介紹了jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁面布局方式為主,需要的朋友可以參考下2015-12-12