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 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
手机号码,密码正则验证
Sep 04 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
第二节 对象模型 [2]
2006/10/09 PHP
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
javascript计时器详解
2015/02/28 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
如何定义TensorFlow输入节点
2020/01/23 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
基于Python绘制个人足迹地图
2020/06/01 Python
python开发入门——列表生成式
2020/09/03 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
施工资料员岗位职责
2014/01/06 职场文书
上课看小说检讨书
2014/02/22 职场文书
党支部评议意见
2015/06/02 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
Python3.10的一些新特性原理分析
2021/09/15 Python