需求来源是这样的：上传一个很大的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：
代码如下:
processController.jsp：
代码如下:
=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：
代码如下:
File Upload Field Example
sunxing007
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文件再上传.");
}
}
}]
});
把这三个文件放到tomcat/webapps/ROOT/, 同时把ext的主要文件也放到这里，启动tomcat即可测试：http://localhost:8080/upload.html
我的资源里面有完整的示例文件：点击下载， 下载zip文件之后解压到tomcat/webapps/ROOT/即可测试。
最后需要特别提醒，因为用到了apache 的fileUpload组件，因此，需要把common-fileupload.jar放到ROOT/WEB-INF/lib下。