jquery之ajaxfileupload异步上传插件

由于项目需求在上传头像是需要使用异步上传文件，在上传的过程中需要对文件进行校验：规则如下：宽度和高

度大于200，宽高比要小于2，大小小于2M。

    我这里使用的是AjaxFileUploader这个组件，服务器使用Struts处理文件。

    实例：

[html] view
plain copy

<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

[html] view
plain copy

<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文件：

[javascript] view
plain copy

//上传头像  

    $("#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

[html] view
plain copy

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];  

          

        //构建文件名  

        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("\\\\");  

        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上传头像)