jquery ajaxfileupload异步上传插件使用详解
由于项目需求在上传头像是需要使用异步上传文件,在上传的过程中需要对文件进行校验:规则如下:宽度和高
度大于200,宽高比要小于2,大小小于2M。
我这里使用的是AjaxFileUploader这个组件,服务器使用Struts处理文件。
实例:
<formaction=""id="imageForm"enctype="multipart/form-data"method="POST"> <inputtype="file"name="userPhoto"id="userPhoto"> <inputtype="button"value="上传"id="shangchuan"> </form>
这里需要引入两个js文件:jQuery、ajaxfileUpload
<scripttype="text/javascript"src="${basePath}/resource/js/plugin/jquery-1.6.min.js"></script> <scripttype="text/javascript"src="${basePath}/resource/js/grzx/ajaxfileupload.js"></script>
js文件:
//上传头像 $("#shangchuan").click(function(){ varfile=$("#userPhoto").val(); if(file==""){ alert("请选择上传的头像"); return; } else{ //判断上传的文件的格式是否正确 varfileType=file.substring(file.lastIndexOf(".")+1); if(fileType!="png"&&fileType!="jpg"){ alert("上传文件格式错误"); return; } else{ varurl="/symh/user/uploadPhoto_uploadPhoto.action?nowtime="+newDate().getTime(); $.ajaxFileUpload({ url:url, secureuri:false, fileElementId:"userPhoto",//file的id dataType:"text",//返回数据类型为文本 success:function(data,status){ if(data=="1"){ alert("请上传宽度大于200像素和高度大于200像素的图片"); } elseif(data=="2"){ alert("请上传宽高比不超过2的图片"); } elseif(data=="3"){ alert("请上传文件大小不大于2M的图片"); } else{ $("#uploadImage").hide(); $("#srcImg").attr("src",data); $("#previewImg").attr("src",data); $("#cutImage").show(); $("#bigImage").val(data); cutImage();//截取头像 } } }) } } })
后台处理程序:UploadPhotoAction.Java
publicclassUploadPhotoAction{ privateFileuserPhoto; privateStringuserPhotoContentType; privateStringuserPhotoFileName; publicFilegetUserPhoto(){ returnuserPhoto; } publicvoidsetUserPhoto(FileuserPhoto){ this.userPhoto=userPhoto; } publicStringgetUserPhotoContentType(){ returnuserPhotoContentType; } publicvoidsetUserPhotoContentType(StringuserPhotoContentType){ this.userPhotoContentType=userPhotoContentType; } publicStringgetUserPhotoFileName(){ returnuserPhotoFileName; } publicvoidsetUserPhotoFileName(StringuserPhotoFileName){ this.userPhotoFileName=userPhotoFileName; } /** *用户上传图像 */ publicvoiduploadPhoto(){ try{ HttpServletResponseresponse=(HttpServletResponse)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); response.setCharacterEncoding("UTF-8"); FileInputStreamfis1=newFileInputStream(getUserPhoto());//保存文件 FileInputStreamfis2=newFileInputStream(getUserPhoto());//判断文件 inti=this.checkImage(fis2); if(i==1){ response.getWriter().print("1"); } elseif(i==2){ response.getWriter().print("2"); } elseif(i==3){ response.getWriter().print("3"); } else{//文件正确、上传 //得到文件名 StringphotoName=getPhotoName(getUserPhotoFileName()); FileOutputStreamfos=newFileOutputStream(getSavePath()+"\\"+photoName); byte[]buffer=newbyte[1024]; intlen=0; while((len=fis1.read(buffer))>0){ fos.write(buffer,0,len); } //处理文件路径,便于在前台显示 StringimagPathString=dealPath(getSavePath()+"\\"+photoName); response.getWriter().print(imagPathString); } } catch(IOExceptione){ e.printStackTrace(); } } /** *重新命名头像名称:用户编号+头像后缀 */ publicStringgetPhotoName(StringphotoName){ //获取用户 HttpServletRequestrequest=(HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST); UserBeanuserBean=(UserBean)request.getSession().getAttribute("userBean"); //获取文件的后缀 String[]strings=photoName.split("\\."); Stringhz=strings[1]; //构建文件名 StringfileName=userBean.getUserId()+"."+hz; returnfileName; } /** *获取上传路径 */ publicStringgetSavePath(){ returnServletActionContext.getServletContext().getRealPath("upload/photos"); } /** *判断上传的头像是否合法 *规则:宽度和高度大于200、宽高比小于2、大小小于2M *宽度或者高度<200返回1 *宽高比>2返回2 *大小大于2M返回3 *正确返回0 */ publicintcheckImage(FileInputStreamfis){ try{ BufferedImageimage=ImageIO.read(fis); doublewidth=image.getWidth(); doubleheight=image.getHeight(); if(width<200||height<200){ return1; } elseif(width/height>2){ return2; } elseif(fis.available()/(1024*1024)>2){ return3; } else{ return0; } }catch(IOExceptione){ e.printStackTrace(); } return1; } /** *处理头像路径 */ publicStringdealPath(Stringpath){ String[]strings=path.split("\\\\"); Stringstring2="/"; for(inti=strings.length-4;i<strings.length;i++){ if(i==strings.length-1){ string2=string2+strings[i]; } else{ string2=string2+strings[i]+"/"; } } returnstring2; } }
这里就介绍使用ajaxFileUpload异步上传文件。下面将介绍如何截取头像(类似于QQ上传头像)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。