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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jquery  # ajaxfileupload  # 异步上传  # jquery ajaxfileupload异步上传插件  # jQuery插件ajaxFileUpload异步上传文件  # PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例  # jquery中的ajax异步上传  # jQuery异步上传文件插件ajaxFileUpload详细介绍  # JQuery插件ajaxfileupload.js异步上传文件实例  # jQuery插件ajaxFileUpload实现异步上传文件效果  # jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码  # jquery之ajaxfileupload异步上传插件(附工程代码)  # jquery+ajax实现异步上传文件显示进度条  # 上传  # 上传文件  # 的是  # 不超过  # 请选择  # 类似于  # 大家多多  # 是否正确  # 过程中  # 是否合法  # 保存文件  # 小不  # return  # alert  # png  # amp  # lastIndexOf  # fileType  # substring  # min 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 香港服务器部署网站为何提示未备案？  浅谈javascript alert和confirm的美化  三星、SK海力士获美批准：可向中国出口芯片制造设备  Android Socket接口实现即时通讯实例代码  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  如何在云主机快速搭建网站站点？  Laravel Eloquent：优雅地将关联模型字段扁平化到主模型中  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  JavaScript Ajax实现异步通信  如何快速查询网址的建站时间与历史轨迹？  教学论文网站制作软件有哪些,写论文用什么软件 ？  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  Python3.6正式版新特性预览  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  C语言设计一个闪闪的圣诞树  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  清除minerd进程的简单方法  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  如何在Windows环境下新建FTP站点并设置权限？  消息称 OpenAI 正研发的神秘硬件设备或为智能笔，富士康代工  如何为不同团队 ID 动态生成多个非值班状态按钮  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  浅谈Javascript中的Label语句  JavaScript实现Fly Bird小游戏  昵图网官方站入口 昵图网素材图库官网入口  简历没回改：利用AI润色让你的文字更专业  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  北京网站制作公司哪家好一点,北京租房网站有哪些？  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  香港服务器选型指南：免备案配置与高效建站方案解析  网站制作企业,网站的banner和导航栏是指什么？  SQL查询语句优化的实用方法总结  Android实现代码画虚线边框背景效果  C++用Dijkstra(迪杰斯特拉)算法求最短路径  WEB开发之注册页面验证码倒计时代码的实现  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  如何批量查询域名的建站时间记录？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  如何在IIS中新建站点并配置端口与物理路径？  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  Laravel如何使用Collections进行数据处理？（实用方法示例）  如何用虚拟主机快速搭建网站？详细步骤解析