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上传头像)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。