华山资源网

利用jsp+Extjs实现动态显示文件上传进度
网络编程 2024/12/23 佚名
3 1

需求来源是这样的：上传一个很大的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="/UploadFiles/2021-04-02/ext-base.js">




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


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


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

 


利用jsp+Extjs实现动态显示文件上传进度
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com