servlet+jquery实现文件上传进度条示例代码


Posted in Javascript onJanuary 25, 2017

现在文件的上传,特别是大文件上传,都需要进度条,让客户知道上传进度。

本文简单记录下如何弄进度条,以及一些上传信息,比如文件的大小,上传速度,预计剩余时间等一些相关信息。代码是匆忙下简单写的,一些验证没做,或代码存在一些隐患,不严谨的地方。本文代码只供参考。

进度条的样式多种多样,有些网站弄得非常绚烂漂亮。本文UI端不太懂,只会一些简单的基本的css而已,所以进度条弄得不好看。本文侧重的给读者提供一个参考,一个实现思路而已。

注:由于jQuery版本用的是2.1.1,所以如果跑本例子源码,请用IE9以上或火狐、谷歌浏览器测试。

servlet+jquery实现文件上传进度条示例代码

servlet+jquery实现文件上传进度条示例代码 

接收文件上传的servlet

UploadFileServlet.Java

package com.fei.servlet; 
 
import java.io.IOException; 
import java.util.Date; 
import java.util.Map; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
import com.fei.util.FileUploadUtil; 
 
public class UploadFileServlet extends HttpServlet { 
 
   
  private static final long serialVersionUID = 1L; 
 
  public void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    this.doPost(request, response); 
  } 
 
  public void doPost(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    try { 
      long start = System.currentTimeMillis(); 
      System.out.println("开始上传文件........." ); 
      Map<String, String> params = FileUploadUtil.upload(request); 
      System.out.println("文件上传完成........." ); 
      System.out.println("文件上次用时:"+(System.currentTimeMillis()-start)+"毫秒"); 
    } catch (Exception e) { 
      e.printStackTrace(); 
    } 
  } 
}

将上传文件进行下载到服务器的处理

FileUploadUtil.java

package com.fei.util; 
 
import java.io.File; 
import java.util.HashMap; 
import java.util.Iterator; 
import java.util.List; 
import java.util.Map; 
 
import javax.servlet.http.HttpServletRequest; 
 
import org.apache.commons.fileupload.FileItem; 
import org.apache.commons.fileupload.ProgressListener; 
import org.apache.commons.fileupload.disk.DiskFileItemFactory; 
import org.apache.commons.fileupload.servlet.ServletFileUpload; 
 
public class FileUploadUtil { 
 
  /** 
   * 文件上传保存路径 
   */ 
  private static final String SAVE_FILEPATH = "/fileupload/"; 
  /** 
   * 文件上传临时保存路径 
   */ 
  private static final String SAVE_FILE_TMPPATH = "/fileupload/tmp/"; 
  /** 
   * 上传文件的最大值M 
   */ 
  private static final int MAX_FILE_SIZE = 100*1024*1024; 
  /** 
   * 文件数据在内存中超过多少M后,就写入临时文件 
   */ 
  private static final int THRESHOLD_SIZE = 2*1024*1024; 
   
  private static final String ENCODING = "UTF-8"; 
   
  /** 
   * 处理文件上传的表单 
   * 下载文件,并返回文件名称及普通表单域中其它属性值 
   * 获取文件名 
   */ 
  public static Map<String,String> upload(HttpServletRequest request)throws Exception{ 
    Map<String,String> params = new HashMap<String, String>(); 
     
    String savePath = request.getSession().getServletContext() 
        .getRealPath(SAVE_FILEPATH)+ File.separator; 
    String savePathTemp = request.getSession().getServletContext() 
        .getRealPath(SAVE_FILE_TMPPATH)+ File.separator; 
     
    File saveFileTempDir = new File(savePathTemp); 
     
    DiskFileItemFactory factory = new DiskFileItemFactory(); 
    //当内存中文件数据达到THRESHOLD_SIZE后,就写入临时文件中,避免上传大文件时,消化太多内存 
    factory.setSizeThreshold(THRESHOLD_SIZE); 
    factory.setRepository(saveFileTempDir); 
     
    ServletFileUpload upload = new ServletFileUpload(factory); 
    upload.setHeaderEncoding(ENCODING); 
    upload.setSizeMax(MAX_FILE_SIZE); 
     
    FileUploadInfo fileUploadInfo = new FileUploadInfo(); 
    upload.setProgressListener(new FileUploadListener(fileUploadInfo)); 
    request.getSession().setAttribute("uploadInfo", fileUploadInfo); 
     
    List items = upload.parseRequest(request); 
    Iterator iter = items.iterator(); 
    int fileNum = 1; 
    while(iter.hasNext()){ 
      FileItem item = (FileItem) iter.next(); 
      if (item.isFormField()) {//普通表单域 
        params.put(item.getFieldName(), item.getString()); 
      } else { 
        String fileName = item.getName().replace("/", "\\"); 
        int i = fileName.lastIndexOf("\\"); 
        fileName = fileName.substring(i+1); 
        //避免重复 
        fileName = System.currentTimeMillis() + fileName; 
         
        File uploadedFile = new File(savePath + fileName); 
        item.write(uploadedFile); 
         
        params.put("fileName0"+fileNum, fileName); 
        fileNum ++; 
 
      } 
    } 
     
     
    return params; 
  } 
   
} 
 
class FileUploadListener implements ProgressListener{ 
 
  FileUploadInfo fileUploadInfo = null; 
   
  public FileUploadListener(FileUploadInfo fileUploadInfo) { 
    this.fileUploadInfo = fileUploadInfo; 
  } 
   
  @Override 
  public void update(long uploadSize, long totalSize, int itemNum) { 
    this.fileUploadInfo.setTotalSize(totalSize); 
    this.fileUploadInfo.setUploadSize(uploadSize); 
     
  } 
   
}

上传文件的一些信息

FileUploadInfo.java

package com.fei.util; 
 
public class FileUploadInfo { 
 
  private final int K = 1024; 
   
  private final int M = K * 1024; 
   
  /** 
   * 总大小 
   */ 
  private long totalSize; 
  /** 
   * 开始上传时间 
   */ 
  private long startTime = System.currentTimeMillis(); 
  /** 
   * 已上传多少 
   */ 
  private long uploadSize; 
   
  /** 
   * 上传速度(K/S) 
   */ 
  public double getUploadSpeed_K(){ 
    long currentTime = System.currentTimeMillis(); 
    long usedTime = currentTime - startTime; 
    if(usedTime == 0.0){ 
      return 0.0; 
    } 
    return getUploadSize_K()/usedTime*1000d; 
  } 
  /** 
   * 获取已上传百分比 
   * @return 
   */ 
  public double getUploadPercent(){ 
    return (getUploadSize()*1.00/getTotalSize())*100d; 
  } 
  /** 
   * 剩余时间(s) 
   * @return 
   */ 
  public double getRemainTime(){ 
    double speedKB = getUploadSpeed_K(); 
    if(speedKB<= 0.00){ 
      return -1d; 
    } 
    return (getTotalSize_K() - getUploadSize_K())/speedKB; 
  } 
  /** 
   * 已上传时间 
   * @return 
   */ 
  public double getUseTime(){ 
    return (System.currentTimeMillis() - startTime)/1000d; 
  } 
   
  public long getTotalSize() { 
    return totalSize; 
  } 
   
  public double getTotalSize_K(){ 
    return getTotalSize()*1.0/K; 
  } 
   
  public double getTotalSize_M(){ 
    return getTotalSize()*1.0/M; 
  } 
   
  public long getUploadSize() { 
    return uploadSize; 
  } 
   
  public double getUploadSize_K(){ 
    return getUploadSize()/K; 
  } 
   
  public double getUploadSize_M(){ 
    return getUploadSize()/M; 
  } 
   
  public void setTotalSize(long totalSize) { 
    this.totalSize = totalSize; 
  } 
   
   
  public void setUploadSize(long uploadSize) { 
    this.uploadSize = uploadSize; 
  } 
   
  private String double2String(double d){ 
    return String.format("%.2f", d); 
  } 
   
  public String toString(){ 
    return "{"+ 
        "'totalSize':'"+double2String(getTotalSize_M())+"M',"+ 
        "'uploadSize':'"+double2String(getUploadSize_M())+"M',"+ 
        "'uploadSpeed':'"+double2String(getUploadSpeed_K())+"KB/s',"+ 
        "'uploadPrecent':'"+double2String(getUploadPercent())+"',"+ 
        "'remainTime':'"+(getRemainTime()<0?"未知":double2String(getRemainTime()))+"s"+"',"+ 
        "'useTime':'"+double2String(getUseTime())+"s' "+ 
        "}"; 
  } 
}

读取文件上传进度的servlet

UploadFileProgressServlet.java

package com.fei.servlet; 
 
import java.io.IOException; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
import com.fei.util.FileUploadInfo; 
 
public class UploadFileProgressServlet extends HttpServlet { 
 
  private static final long serialVersionUID = 1L; 
 
  public void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    this.doPost(request, response); 
  } 
   
  public void doPost(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    String responseContent = ""; 
     
    Object obj = request.getSession().getAttribute("uploadInfo"); 
    if(obj == null){ 
      responseContent = "{'data':'NoData'}"; 
    }else{ 
      FileUploadInfo uploadInfo = (FileUploadInfo)obj; 
      responseContent = uploadInfo.toString(); 
      if(uploadInfo.getUploadPercent()== 100.0){ 
        request.getSession().setAttribute("uploadInfo", null); 
      } 
    } 
    System.out.println("文件上次情况:"+responseContent); 
    response.getWriter().print(responseContent); 
  } 
}

前台页面upload2.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script src="js/jquery-2.1.1.js" type="text/javascript"></script> 
 
<script > 
var falseNum = 0; 
$(document).ready(function(){ 
  $('#subbut').bind('click', 
      function(){ 
        $('#fForm').submit(); 
        var eventFun = function(){ 
          $.ajax({ 
            type: 'GET', 
            url: '/uploadtest/UploadFileProgressServlet.do', 
            data: {}, 
            dataType: 'text', 
            success : function(resData){ 
              //如果10次都失败,那就不要继续访问了 
              if(falseNum > 10){ 
               window.clearInterval(intId); 
               return; 
              } 
              var obj = eval("("+resData+")"); 
              if(obj.data == 'NoData'){ 
                falseNum ++ ; 
                return; 
              } 
              $("#graphbox").css('display','block'); 
              $(".progressbar").css('width',obj.uploadPrecent+'%'); 
              $("#uploadPer").html(obj.uploadPrecent+'%'); 
              $("#progressInfo").html('总大小:'+obj.totalSize 
                  +',速度:'+obj.uploadSpeed 
                  +'%,剩余时间:'+obj.remainTime+',已用时间:'+obj.useTime); 
              if(obj.uploadPrecent == 100){ 
                window.clearInterval(intId); 
                $("#progressInfo").html("上传成功!"); 
              }   
        }});}; 
        var intId = window.setInterval(eventFun,500); 
  }); 
}); 
</script> 
<style> 
#graphbox{ 
border:1px solid #e7e7e7; 
padding:5px; 
width:350px; 
background-color:#f8f8f8; 
margin:5px 0; 
display:none; 
} 
.graph{ 
position:relative; 
background-color:#F0EFEF; 
border:1px solid #cccccc; 
padding:2px; 
font-size:10px; 
font-weight:500; 
} 
.graph .progressbar{ 
position:relative; 
text-align:right; 
color:#ffffff; 
height:10px; 
line-height:10px; 
font-family:Arial; 
display:block; 
} 
.graph .progressbar{background-color:#66CC33;} 
 
</style> 
</head> 
<body> 
    <form id='fForm' class="form-actions form-horizontal" action="/uploadtest/UploadFileServlet.do"  
       encType="multipart/form-data" target="uploadf" method="post"> 
         <div class="control-group"> 
          <label class="control-label">上传文件:</label> 
          <div class="controls"> 
            <input type="file" name="file" style="width:350px"></br> 
            <input type="file" name="file2" style="width:350px"></br> 
            <button type="button" id="subbut" class="btn">上传</button>   
          </div> 
          <div id="graphbox"> 
            <div class="graph"> 
            <span class="progressbar" style="width:0%;"><span id="uploadPer"></span></span> 
            </div> 
          </div> 
          <div id='progressInfo'> 
          </div> 
        </div> 
    </form> 
    <iframe name="uploadf" style="display:none"></iframe> 
</body> 
</html>

将项目部署到tomcat(或其他web容器),访问http://172.16.126.128:8080/uploadtest/upload2.html

效果:

servlet+jquery实现文件上传进度条示例代码

servlet+jquery实现文件上传进度条示例代码

代码下载:demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
express启用https使用小记
May 21 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
json数据处理及数据绑定
Jan 25 #Javascript
详解jQuery中ajax.load()方法
Jan 25 #Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 #Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 #Javascript
js实现文字选中分享功能
Jan 25 #Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 #Javascript
jquery实现拖动效果(代码分享)
Jan 25 #Javascript
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
微信小程序位置授权处理方法
2019/06/13 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python FFT合成波形的实例
2019/12/04 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
学雷锋志愿服务月活动总结
2014/03/09 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python