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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 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中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
json 定义
2008/06/10 Javascript
JavaScript中的类继承
2010/11/25 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
公司培训欢迎词
2014/01/10 职场文书
工作岗位说明书模板
2014/05/09 职场文书
家庭贫困证明
2014/09/23 职场文书
2014年协会工作总结
2014/11/22 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
教师节感想
2015/08/11 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Java spring单点登录系统
2021/09/04 Java/Android