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的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
PHP 采集心得技巧
2009/05/15 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
JavaScript File分段上传
2016/03/10 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
vue实现拖拽效果
2019/12/23 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
python操作xml文件示例
2014/04/07 Python
sqlalchemy对象转dict的示例
2014/04/22 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
python识别验证码的思路及解决方案
2020/09/13 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
婚前财产公证书
2014/04/10 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers