jquery ajaxfileupload异步上传插件使用详解


Posted in Javascript onFebruary 08, 2017

由于项目需求在上传头像是需要使用异步上传文件,在上传的过程中需要对文件进行校验:规则如下:宽度和高
度大于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()+"\\"+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上传头像)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(十五)
Jan 28 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 #Javascript
简单实现bootstrap导航效果
Feb 07 #Javascript
vue.js实现请求数据的方法示例
Feb 07 #Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 #Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 #Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 #Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 #Javascript
You might like
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
JavaScript如何操作css
2020/10/24 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
办公室文员自荐书
2014/02/03 职场文书
主管会计岗位责任制
2014/02/10 职场文书
施工安全员岗位职责
2015/04/11 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
python实现自动清理文件夹旧文件
2021/05/10 Python
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang