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 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
WebPack配置vue多页面的技巧
May 15 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 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完整的日历类(CLASS)
2006/11/27 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python3.2模拟实现webqq登录
2016/02/15 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python随机数分布random均匀分布实例
2019/11/27 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
个人自我评价和职业目标
2014/01/24 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
庆祝国庆节标语
2014/10/09 职场文书
英语投诉信范文
2015/07/03 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js