利用Bootstrap简单实现一个文件上传进度条

说明：

　　1. 使用commons-fileupload.jar实现文件上传及进度监听

　　2. 使用bootstrap的进度条进行页面显示

　　3. 因为进度数据保存在session中，所以同一个浏览器同时只能发送一次上传请求，多次发送进度会错乱

实例：

1.项目结构

2.pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  	<modelVersion>4.0.0</modelVersion>

	<groupId>org.file</groupId>

	<artifactId>process</artifactId>

	<packaging>war</packaging>

	<version>0.0.1-SNAPSHOT</version>

	<dependencies>

		<!-- Junit -->

		<dependency>

			<groupId>junit</groupId>

			<artifactId>junit</artifactId>

			<version>4.12</version>

			<scope>test</scope>

		</dependency>

		<!-- Servlet -->

		<dependency>

		    <groupId>javax.servlet</groupId>

		    <artifactId>javax.servlet-api</artifactId>

		    <version>3.1.0</version>

		    <scope>provided</scope>

		</dependency>

		<!-- Commons-fileupload -->

		<dependency>

		    <groupId>commons-fileupload</groupId>

		    <artifactId>commons-fileupload</artifactId>

		    <version>1.3.2</version>

		</dependency>

	</dependencies>

	<build>

		<finalName>process</finalName>

	</build>

</project>

3.index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Excel上传</title>

<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">

</head>

<body>

	<div class="container" align="center">

		<form action="uploadExcel" method="post" enctype="multipart/form-data">

			<table class="table" style="width: 50%">

				<tr id="msg" style="display: none;">

					<th colspan="2" style="text-align: center;">

						<font color="#00CD00">文件上传成功，共用时${time }ms</font>

					</th>

				</tr>

				<tr>

					<th>上传文件1:</th>

					<td><input type="file" name="file"/></td>

				</tr>

				<tr>

					<th>上传文件2:</th>

					<td><input type="file" name="file"/></td>

				</tr>

				<tr>

					<th>上传人:</th>

					<td><input type="text" name="user"/></td>

				</tr>

				<tr>

					<th> </th>

					<td>

						<button id="submit" type="submit" class="btn btn-default">上传</button>

					</td>

				</tr>

			</table>

		</form>

	</div>

	<!-- 文件上传模态框 -->

	<div id="progressModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static"

		data-keyboard="false">

  		<div class="modal-dialog" role="document">

    		<div class="modal-content">

				<div class="modal-header">

			  		<h4 class="modal-title">文件上传进度</h4>

				</div>

      			<div class="modal-body">

        			<div id="progress" class="progress">

						<div id="progress_rate" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"

							class="progress-bar progress-bar-success progress-bar-striped active"

							role="progressbar" style="width: 0%">

	  							<span id="percent">0%</span>

						</div>

					</div>

      			</div>

    		</div>

  		</div>

	</div>

	<script type="text/javascript" src="bootstrap/jquery-3.2.0.min.js"></script>

    <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>

    <script type="text/javascript">

    	var process;// 定时对象

    	$(function() {

    		var time = "${time}";

    		if (time != null && time != "") {

    			$("#msg").css("display", "block");

    		}

    		$("#submit").bind("click", function(){

    			process = setInterval("getProcess()", 100);// 每0.1s读取一次进度

        		$("#progressModal").modal("show");// 打开模态框

        	});

    	});

    	// 读取文件上传进度并通过进度条展示

    	function getProcess() {

    		$.ajax({

    			type: "get",

    			url: "uploadExcel",

    			success: function(data) {

    				var rate = data * 100;

    				rate = rate.toFixed(2);

    				$("#progress_rate").css("width", rate + "%");

    				$("#percent").text(rate + "%");

    				if (rate >= 100) {

    					clearInterval(process);

    					$("#percent").text("文件上传成功！");

    				}

    			}

    		});

    	}

    </script>

</body>

</html>

4.UploadProcess.java

package org.file.upload;

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import java.io.PrintWriter;

import java.math.BigDecimal;

import java.util.Calendar;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

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;

@WebServlet("/uploadExcel")

public class UploadProcess extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		System.out.println("开始上传文件...");

		// 使用session保存进度数据

		final HttpSession session = req.getSession();

		long start_time = Calendar.getInstance().getTimeInMillis();

		// 获取上传文件临时保存路径

		String tempPath = this.getServletContext().getRealPath("/WEB-INF/upload");

		File file = new File(tempPath);

		if (!file.exists() && !file.isDirectory()) {// 目录不存在或不是一个目录

			file.mkdirs();

		}

		try {

			// 创建DiskFileItemFactory工厂类

			DiskFileItemFactory factory = new  DiskFileItemFactory();

			// 创建一个文件上传解析器

			ServletFileUpload upload = new ServletFileUpload(factory);

			// 监听文件上传进度

			upload.setProgressListener(new ProgressListener() {

				public void update(long pBytesRead, long pContentLength, int pItems) {

					session.setAttribute("fileSize", pContentLength);

					session.setAttribute("loadSize", pBytesRead);

				}

			});

			// 解决上传文件的中文乱码

			upload.setHeaderEncoding("UTF-8");

			if (!ServletFileUpload.isMultipartContent(req)) {// 普通表单

				return ;

			} else {

				// 利用文件上传解析器解析数据并存放到list中

				List<FileItem> list = upload.parseRequest(req);

				// 循环所有数据

				for (FileItem item: list) {

					// 判断数据来源

					if (item.isFormField()) {//普通输入框中的数据

						String name = item.getFieldName();// 输入框的name值

						String value = item.getString("UTF-8"); // 输入框的值

						System.out.println(name + " : " + value);

					} else {//文件

						// 获取上传文件的文件路径(不同浏览器不同，有的是文件名，有的是全路径)

						String fileName = item.getName();

						if (fileName == null || "".equals(fileName.trim())) {

							continue;

						}

						// 获取文件名

						fileName = fileName.substring(fileName.lastIndexOf("\\") + 1);

						// 获取上传文件的输入流

						InputStream is = item.getInputStream();

						// 创建一个文件输出流

						FileOutputStream fos = new FileOutputStream(tempPath + "\\" + fileName);

						// 创建一个缓存区

						byte[] buff = new byte[1024];

						int len = 0;

						while ((len = is.read(buff)) > 0) {// 循环读取数据

							fos.write(buff, 0, len);// 使用文件输出流将缓存区的数据写入到指定的目录中

						}

						// 关闭输出流

						fos.close();

						// 关闭输入流

						is.close();

						// 删除临时文件

						item.delete();

					}

				}

			}

			long end_time = Calendar.getInstance().getTimeInMillis();

			long lt = end_time - start_time;

			System.out.println("文件上传成功,共用时" + (end_time - start_time) + "ms");

			req.setAttribute("time", lt);

			req.getRequestDispatcher("index.jsp").forward(req, resp);

		} catch (Exception e) {

			e.printStackTrace();

		}

	}

	@Override

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		// 获取进度数据

		HttpSession session = req.getSession();

		Object obj1 = session.getAttribute("loadSize");

		long loadSize = 0L;

		if (obj1 != null) {

			loadSize = Long.valueOf(obj1.toString());

		}

		Object obj2 = session.getAttribute("fileSize");

		long fileSize = 1L;

		if (obj2 != null) {

			fileSize = Long.valueOf(obj2.toString());

		}

		// 计算上传比例

		double rate = loadSize * 1.0 / fileSize;

		BigDecimal bd = new BigDecimal(rate);

		rate = bd.setScale(4, BigDecimal.ROUND_HALF_UP).doubleValue();

		// 返回

		resp.setContentType("text/html;charset=UTF-8");

		PrintWriter pw = resp.getWriter();

		pw.write(rate + "");

		pw.flush();

		pw.close();

	}

}

5.效果预览

利用Bootstrap简单实现一个文件上传进度条的更多相关文章

HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
iOS_文件上传进度条的实现思路-AFNettworking
iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...
PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
Layui多文件上传进度条
Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用.后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码 HTML: <div cla ...
spring定时任务-文件上传进度条
spring定时任务导依赖  <dep ...
asp.net文件上传进度条研究
文章:asp.net 文件上传进度条实现代码
vue多文件上传进度条进度不更新问题
转自 hhttp://www.cnblogs.com/muge10/p/6767493.html 感谢这位兄弟的文章,之前因为这个问题 ,我连续在sgmentflow上提问过多次,完全没人能回答.谢谢 ...
php+大视频文件上传+进度条
该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开始. 如何分 ...

随机推荐

如何理解java反射？
一.反射基本概念反射之中包含了一个"反"的概念,所以要想解释反射就必须先从"正"开始解释,一般而言,当用户使用一个类的时候,应该先知道这个类,而后通过这个类产 ...
N皇后问题（C++实现和函数式编程实现）
题意在 N * N 的方格棋盘放置了 N 个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.求出有多少种合法的放置方法. C++实现(位运算 ...
Python爬取中国天气网
Python爬取中国天气网基于requests库制作的爬虫. 使用方法:打开终端输入 “python3 weather.py 北京(或你所在的城市)" 程序正常运行需要在同文件夹下加入一个 ...
1.12（java学习笔记）多态及向上、向下转型
一.多态多态是指同一个方法被调用,由于对象不同导致行为不同. 例如调用自由活动方法,张三喜欢玩耍,那么他就会去玩耍. 李四喜欢学习,那么他可能去学习.调用方法因对象的不同而产生了不同的行为. 形成 ...
unity3d 场景配置文件生成代码
using UnityEngine; using UnityEditor; using System.IO; using System; using System.Text; using System ...
访问控制技术- 标准IP访问列表
1.设置pc IP 网关 192.168.1.1 192.168.1.254 192.168.1.2 192.168.1.254 192.168.3.1 192.168.3.254 2.设置交换机借 ...
Redis2.8.7配置文件说明
Redis master配置文件说明 daemonize no 默认情况下,redis不是在后台运行的,如果需要在后台运行,把该项的值更改为yes daemonize yes # 当redis在后台运 ...
C++ 11中几个我比较喜欢的语法（三）
随着Vsisual Studio 2013 RC版的放出,之前承诺的对C++ 11语法支持已经全部完成,本文是C++ 11中我喜欢的语法系列的最后一部分(一),(二). 非静态成员直接初始化在C++ ...
IO流知识点
如何判断是输入还是输出?答:以程序为中心.如何判断是解码还是编码?答:以程序为中心.程序只懂二进制,所以,以二进制转换成字符是解码,字符转换成二进制是编码.1. 首先,File 它是给程序跟文件或文件 ...
linux bash 入门
#!/bin/bash #shell使用的熟练成都反映用户对Unix/Linux使用的熟练程度 #shell 有两种执行命令的方式:交互式和批处理 #常见的shell脚本解释器有bash,sh,csh ...

利用Bootstrap简单实现一个文件上传进度条

利用Bootstrap简单实现一个文件上传进度条的更多相关文章

随机推荐

热门专题