利用jsp+Extjs实现动态显示文件上传进度

2024-03-03 04:59:12

需求来源是这样的：上传一个很大的excel文件到server， server会解析这个excel，然后一条一条的插入到数据库，整个过程要耗费很长时间，因此当用户点击上传之后，需要显示一个进度条，并且能够根据后台的接收的数据量和处理的进度及时更新进度条。

分析：后台需要两个组件，uploadController.jsp用来接收并且处理数据，它会动态的把进度信息放到session，另一个组件processController.jsp用来更新进度条；当用户点“上传”之后，form被提交给uploadController.jsp，同时用js启动一个ajax请求到processController.jsp，ajax用获得的进度百分比更新进度条的显示进度，而且这个过程每秒重复一次；这就是本例的基本工作原理。

现在的问题是server接收数据的时候怎么知道接收的数据占总数据的多少？如果我们从头自己写一个文件上传组件，那这个问题很好解决，关键是很多时候我们都是用的成熟的组件，比如apache commons fileupload；比较幸运的是，apache早就想到了这个问题，所以预留了接口可以用来获取接收数据的百分比；因此我就用apache commons fileupload来接收上传文件。

uploadController.jsp：

<%@ page language="java" import="java.util.*, java.io.*, org.apache.commons.fileupload.*, org.apache.commons.fileupload.disk.DiskFileItemFactory, org.apache.commons.fileupload.servlet.ServletFileUpload" pageEncoding="utf-8"%>
<%
//注意上面的import的jar包是必须的
//下面是使用apache commons fileupload接收上传文件；
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
//因为内部类无法引用request，所以要实现一个。
class MyProgressListener implements ProgressListener{
	private HttpServletRequest request = null;
	MyProgressListener(HttpServletRequest request){
		this.request = request;
	}
	public void update(long pBytesRead, long pContentLength, int pItems) {
		double percentage = ((double)pBytesRead/(double)pContentLength);
		//上传的进度保存到session，以便processController.jsp使用
		request.getSession().setAttribute("uploadPercentage", percentage);
	}
}
upload.setProgressListener(new MyProgressListener(request));
List items = upload.parseRequest(request);
Iterator iter = items.iterator();
while (iter.hasNext()) {
  FileItem item = (FileItem) iter.next();
  if (item.isFormField()){

  } else {
    //String fieldName = item.getFieldName();
    String fileName = item.getName();
    //String contentType = item.getContentType();
    System.out.println();
    boolean isInMemory = item.isInMemory();
    long sizeInBytes = item.getSize();
    File uploadedFile = new File("c://" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf(".")));
    item.write(uploadedFile);
  }
}
out.write("{success:true,msg:'保存上传文件数据并分析Excel成功!'}");
out.flush();
%>

processController.jsp：

<%@ page language="java" import="java.util.*" contentType = "text/html;charset=UTF-8" pageEncoding="utf-8"%>
<%
	//注意上面的抬头是必须的。否则会有ajax乱码问题。
	//从session取出uploadPercentage并送回浏览器
	Object percent = request.getSession().getAttribute("uploadPercentage");
	String msg = "";
	double d = 0;
	if(percent==null){
		d = 0;
	}
	else{
		d = (Double)percent;
		//System.out.println("+++++++processController: " + d);
	}
	if(d<1){
	//d<1代表正在上传，
		msg = "正在上传文件...";
		out.write("{success:true, msg: '"+msg+"', percentage:'" + d + "', finished: false}");
	}
	else if(d>=1){
		//d>1 代表上传已经结束，开始处理分析excel，
		//本例只是模拟处理excel，在session中放置一个processExcelPercentage，代表分析excel的进度。
		msg = "正在分析处理Excel...";
		String finished = "false";
		double processExcelPercentage = 0.0;
		Object o = request.getSession().getAttribute("processExcelPercentage");
		if(o==null){
			processExcelPercentage = 0.0;
			request.getSession().setAttribute("processExcelPercentage", 0.0);

		}
		else{
			//模拟处理excel,百分比每次递增0.1
			processExcelPercentage = (Double)o + 0.1;
			request.getSession().setAttribute("processExcelPercentage", processExcelPercentage);
			if(processExcelPercentage>=1){
				//当processExcelPercentage>1代表excel分析完毕。
				request.getSession().removeAttribute("uploadPercentage");
				request.getSession().removeAttribute("processExcelPercentage");
				//客户端判断是否结束的标志
				finished = "true";
			}
		}
		out.write("{success:true, msg: '"+msg+"', percentage:'" + processExcelPercentage + "', finished: "+ finished +"}");
		//注意返回的数据，success代表状态
		//percentage是百分比
		//finished代表整个过程是否结束。
	}
	out.flush();
%>

表单页面upload.html：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>File Upload Field Example</title>
		<link rel="stylesheet" type="text/css"
			href="ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="ext/adapter/ext/ext-base.js"> </script>
		<script type="text/javascript" src="ext/ext-all.js"> </script>
		<style>
</style>
	</head>
	<body>
		<a href="http://blog.csdn.net/sunxing007">sunxing007</a>
		<div id="form"></div>
	</body>
	<script>
var fm = new Ext.FormPanel({
	title: '上传excel文件',
	url:'uploadController.jsp?t=' + new Date(),
	autoScroll:true,
	applyTo: 'form',
	height: 120,
	width: 500,
	frame:false,
	fileUpload: true,
	defaultType:'textfield',
	labelWidth:200,
	items:[{
		xtype:'field',
		fieldLabel:'请选择要上传的Excel文件 ',
		allowBlank:false,
		inputType:'file',
		name:'file'
	}],
	buttons: [{
		text: '开始上传',
		handler: function(){
			//点击'开始上传'之后，将由这个function来处理。
		  if(fm.form.isValid()){//验证form， 本例略掉了
		  //显示进度条
				Ext.MessageBox.show({
				  title: '正在上传文件',
				  //msg: 'Processing...',
				  width:240,
				  progress:true,
				  closable:false,
				  buttons:{cancel:'Cancel'}
				});
				//form提交
    fm.getForm().submit();
    //设置一个定时器，每500毫秒向processController发送一次ajax请求
		  var i = 0;
		  var timer = setInterval(function(){
		  		//请求事例
			   Ext.Ajax.request({
			   //下面的url的写法很关键，我为了这个调试了好半天
			   //以后凡是在ajax的请求的url上面都要带上日期戳，
			   //否则极有可能每次出现的数据都是一样的，
			   //这和浏览器缓存有关
						url: 'processController.jsp?t=' + new Date(),
						method: 'get',
						//处理ajax的返回数据
						success: function(response, options){
							status = response.responseText + " " + i++;
							var obj = Ext.util.JSON.decode(response.responseText);
							if(obj.success!=false){
								if(obj.finished){
									clearInterval(timer);
									//status = response.responseText;
									Ext.MessageBox.updateProgress(1, 'finished', 'finished');
									Ext.MessageBox.hide();
								}
								else{
									Ext.MessageBox.updateProgress(obj.percentage, obj.msg);
								}
							}
						},
						failure: function(){
							clearInterval(timer);
							Ext.Msg.alert('错误', '发生错误了。');
						}
					});
		  }, 500);

		  }
		  else{
		  	Ext.Msg.alert("消息","请先选择Excel文件再上传.");
		  }
		}
	}]
});
</script>
</html>

把这三个文件放到tomcat/webapps/ROOT/, 同时把ext的主要文件也放到这里，启动tomcat即可测试：http://localhost:8080/upload.html

我的资源里面有完整的示例文件：点击下载，下载zip文件之后解压到tomcat/webapps/ROOT/即可测试。

最后需要特别提醒，因为用到了apache 的fileUpload组件，因此，需要把common-fileupload.jar放到ROOT/WEB-INF/lib下。

servlet+JSP+mysql实现文件上传的方法

本文实例讲述了servlet+JSP+mysql实现文件上传的方法.分享给大家供大家参考,具体如下: 一.文件上传的基本操作: 1. 表单属性enctype的设置 multipart/form-data和application/x-www-form-urlencoded的区别 FORM元素的enctype属性指定了表单数据向服务器提交时所采用的编码类型,默认的缺省值是"application/x-www-form-urlencoded". 然而,在向服务器发送大量的文本.包含非ASCI
jsp中点击图片弹出文件上传界面及预览功能的实现

花了两天时间琢磨一下图片预览的功能任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:
jsp中点击图片弹出文件上传界面及实现预览实例详解

jsp中点击图片弹出文件上传界面及实现预览实例详解花了两天时间琢磨一下图片预览的功能任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu
JSP使用Common FileUpload组件实现文件上传及限制上传类型实例代码

1.将commons-fileupload-1.3.3.jar复制到Web应用的lib文件夹下,在WebRoot目录下创建limit.jsp页面,在该页面中添加一个文件域的表单,设置类型为 multipart/form-data.代码如下: <body> <h2>上传图书课件</h2> <form action="LimitFile" name="one" enctype="multipart/form-da
jsp-解决文件上传后重启Tomcat时文件自动删除问题

吼吼,我遇到的问题是这样的...... 我写了一个图片上传的方法,上传时,判断没有这个目录就自动建立一个.然后开始上传图片,能成功,能在服务器找到文件夹和相应的文件.但是,重启项目,或者清理缓存之后,图片和文件夹就会自动被删除,不见了. 先说解决办法吧,后面再分析: 1.把/tomcat/webapps/目录清空,删掉该文件夹的所有内容, 2.修改/tomcat/conf/web.xml文件: <servlet> <servlet-name>default</servlet-
jsp实现文件上传下载的程序示例

一.文件上传上传文件是Web开发中经常要用到的功能:例如在基于B/S的人事信息管理系统中上传照片,在新闻发布系统中上传图片等等.....要实现文件上传功能,就需要综合利用java中的文件输入和输出相关的类.在TCP/IP中,最早出现的文件上传机制是FTP.它是将文件由客服端发送到服务器的标准机制,能够考虑到跨平台的文本和二进制格式文件.但是在jsp编程中不能使用FTP方法来上传文件,这是由jsp 运行机制所决定的.下面是上传文件的jsp页面: 复制代码代码如下: <form action=&quo
利用jsp+Extjs实现动态显示文件上传进度

需求来源是这样的:上传一个很大的excel文件到server, server会解析这个excel, 然后一条一条的插入到数据库,整个过程要耗费很长时间,因此当用户点击上传之后,需要显示一个进度条,并且能够根据后台的接收的数据量和处理的进度及时更新进度条. 分析:后台需要两个组件,uploadController.jsp用来接收并且处理数据,它会动态的把进度信息放到session,另一个组件processController.jsp用来更新进度条:当用户点"上传"之后,form被提交给u
Java动态显示文件上传进度实现代码

实现文件上传的进度显示,我们先看看都有哪些问题我们要解决. 1 上传数据的处理进度跟踪 2 进度数据在用户页面的显示就这么2个问题, 第一个问题,主要是组件的选择必须支持数据处理侦听或通知的组件.当然,我肯定只用我自己的组件啦.基本原理是 1 使用request.getContentLength() 读取到处理数据的总长度,注意这个长度不等于文件的长度,因为Base64等编码会增加数据量,如果超过了允许的长度,直接返回-1; 2 在每读取一部分数据时(比如一行,或者64K,或者你自定义的字节
react显示文件上传进度的示例

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 在使用react, vue框架的时候, 如果需要监听文件上传可以使用axios里的onUploadProgress. react上传文件显示进度 demo 前端快速安装react应用确保有node环境 npx create-react-app my-app //当前文件夹创建my-app文件 cd my-app //进入目录 npm install antd //安装antd UI组件 npm
使用jQuery Uploader显示文件上传进度

请到 Download 下载资源的 JQueryElement 示例下载一节下载示例代码 (我们下载)本文将说明 Uploader 控件的功能以及使用过程中的注意事项和技巧, 目录如下: * 准备 * 创建保存页面 * 添加 FileUpload 控件 * 设置 EnableSessionState * 调用 Uploader 的 Save 方法 * 创建获取进度的页面 * 创建上传页面 * 设置保存页面 * 设置获取进度的页面 * 上传 * 隐藏保存页面准备请确保已经在 Download
PHP利用APC模块实现大文件上传进度条的方法

php 大文件带进度的上传,一直是一个令php程序员很苦恼的问题.查询baidu .Google ,大体做带进度的上传方式为:flash+php,socket,apc+php等,下面我介绍了apc +php+ajax制作的带进度的上传,并贴出源码,希望对大家有用. Alternative PHP Cache(APC)是 PHP 的一个免费公开的优化代码缓存.它用来提供免费,公开并且强健的架构来缓存和优化 PHP 的中间代码. 在使用apc时候,先必须使用安装apc 模块. 第一步:下载php_a
Asp无组件上传进度条解决方案

一.无组件上传的原理我还是一点一点用一个实例来说明的吧,客户端HTML如下.要浏览上传附件,我们通过<input type="file">元素,但是一定要注意必须设置form的enctype属性为"multipart/form-data": <form method="post" action="upload.asp" enctype="multipart/form-data">&l
PHP基于session.upload_progress 实现文件上传进度显示功能详解

本文实例讲述了PHP基于session.upload_progress 实现文件上传进度显示功能.分享给大家供大家参考,具体如下: 介绍 session.upload_progress 是PHP5.4的新特征. 当 session.upload_progress.enabled INI 选项开启时,PHP 能够在每一个文件上传时监测上传进度. 这个信息对上传请求自身并没有什么帮助,但在文件上传时应用可以发送一个POST请求到终端(例如通过XHR)来检查这个状态. 当一个上传在处理中,同时POST
jsp+ajax实现无刷新上传文件的方法

本文实例讲述了jsp+ajax实现无刷新上传文件的方法.分享给大家供大家参考,具体如下: 列表页:selectaddress.jsp js页:ajax_edit.js jsp处理页:editaddress.jsp 上传工具类:UploadUtil.java 思想:由于安全问题,javascript操纵不了文件, 导致ajax不能动态上传文件,所以选择了iframe, 列表页把form表单提交到一个隐式的iframe里面,设置表单的属性复制代码代码如下: enctype='multipart/
利用SpringMVC和Ajax实现文件上传功能

个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能: 环境: 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步: 导入相关jar包: 第二步: 配置springmvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xml
Extjs的FileUploadField文件上传出现了两个上传按钮

使用Extjs的FileUploadField插件上传文件,因为FileUploadField是ext的拓展插件所以在其api中是找不到其方法的,这个文件在extjs的examples文件夹下的ux中,所以在使用FileUploadField的时候必须将其引入过来才可以使用,在使用的过程中会出现一个问题就是,在页面中出现了两个上传按钮,这个是和ext的本身css的样式有关系,所以要将样式修改下: 复制代码代码如下: <style type=text/css> .upload-icon { b

利用jsp+Extjs实现动态显示文件上传进度

相关推荐

随机推荐