利用jsp+Extjs实现动态显示文件上传进度
程序员文章站
2023-11-21 19:06:52
需求来源是这样的：上传一个很大的excel文件到server， server会解析这个excel， 然后一条一条的插入到数据库，整个过程要耗费很长时间，因此当用户点击上传之...
需求来源是这样的：上传一个很大的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下。