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的button默认enter事件(回车事件)。
May 18 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
angularjs性能优化的方法
Sep 05 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
jQuery实现增删改查
Dec 22 jQuery
详解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 动态多文件上传
2009/01/18 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
python3实现windows下同名进程监控
2018/06/21 Python
对pandas中Series的map函数详解
2018/07/25 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
党员思想汇报范文
2013/12/30 职场文书
公司门卫管理制度
2014/02/01 职场文书
医院工作检讨书范文
2014/02/10 职场文书
创意婚礼策划方案
2014/05/18 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL