利用了 ahxu-commons-fileuploadex-beta2.jar ,
将 一些Ext控件功能 进行 复合 得到 fileProgressPanel
if (!yiminghe) var yiminghe = {}; yiminghe.fileProgressPanel = function() { this.pbar1 = new Ext.ProgressBar( { //实例化进度条 // cls: "custom", //renderTo: "progressbarExt", //进度条呈现的一个DIV width: 280, //进度条的宽度 text: "0%" //在进度条里的初始文本 }); this.window = new Ext.Window( { //width: 300, frame: true, //layout:'fit', title: '上传文件进度', closable: false, modal: true , hidden:true, width:300, renderTo: document.body , items:[ { layout: 'form', defaults: { anchor: '95%' } , items: [ { xtype: 'field', value:'...', fieldLabel :'上传速度', id:'speed', readOnly:true }, { xtype: 'field', value:'...', fieldLabel :'总大小', id:'totalSize', readOnly:true }, { xtype: 'field', value:'...', fieldLabel :'已上传', id:'readTotalSize', readOnly:true }, { xtype: 'field', value:'...', fieldLabel :'估计剩余时间', id:'remainTime', readOnly:true }, { xtype: 'field', value:'...', fieldLabel :'估计总时间', id:'totalTime', readOnly:true } ] } , this.pbar1 ], bbar: new Ext.StatusBar({ defaultText: '消息', id: 'file-statusbar'}) }) ; } yiminghe.fileProgressPanel.prototype = { setMessageContent:function (mes) { Ext.getCmp('file-statusbar').showBusy(mes); } , GetProgressDetailcallback:function (options, success, detail) { var detail_info = detail.responseText; if (!detail_info) return; var start = detail_info.indexOf("<detail-start>"); var end = detail_info.indexOf("</detail-start>"); if (start != - 1 && end != - 1) { detail_info = detail_info.substring(start + 14, end); var detail_info_array = detail_info.split("||"); var fileName = detail_info_array[0]; if (fileName.length > 15) fileName = "..." + fileName.slice(fileName.length - 16); this.setMessageContent("上传文件 " + fileName); this.pbar1.updateProgress(detail_info_array[1] / 100.0); this.pbar1.updateText('进度 : ' + detail_info_array[1] + "%"); this.setUploadDetail(detail_info_array[2], detail_info_array[3], detail_info_array[4], detail_info_array[5], detail_info_array[6]); } } , setUploadDetail:function (speed, readTotalSize, totalSize, remainTime, totalTime) { Ext.getCmp('speed').setValue(speed + ' K/S'); Ext.getCmp('readTotalSize').setValue(readTotalSize + ' M'); Ext.getCmp('totalSize').setValue(totalSize + ' M'); Ext.getCmp('remainTime').setValue(remainTime); Ext.getCmp('totalTime').setValue(totalTime); } , GetProgressDetail : function () { var conn = new Ext.data.Connection(); // 发送异步请求 conn.request({ // 请求地址 url: 'progressdetail.jsp', method: 'GET', // 指定回调函数 callback: this.GetProgressDetailcallback, scope:this }); } , stop: function () { this.time_pro.stopAll(); this.window.hide(); }, start:function() { this.window.show(); this.setUploadDetail('...', '...', '...', '...', '...'); this.setMessageContent("正在进行连接..."); var task = { run: function() { //alert(this.interval); this.GetProgressDetail(); }, scope:this, interval: 1000 //1 second }; this.time_pro = new Ext.util.TaskRunner(); this.time_pro.start(task); } };
jsp 后端:
<%@ page contentType="text/html; charset=gb2312" language="java"%>
<%@ page import="ahxu.commons.upload.*"%>
<%!
HttpSession ses;
ReportItem aReportItem;
%>
<%
ses=request.getSession(false);
aReportItem=DefaultReportItemManage.getItem(ses);
if(aReportItem!=null){
out.println("<detail-start>");
out.println(aReportItem.getFileName()+"||"
+aReportItem.getCompletePercent()+"||"
+aReportItem.getUploadSpeedKB()+"||"
+aReportItem.getUploadSizeMKB()+"||"
+aReportItem.getTotalSizeMKB()+"||"
+aReportItem.getRemainTimeHMS()+"||"
+aReportItem.getTotalTimeHMS());
out.println("</detail-start>");
}
%>
调用 见
Ext 多文件上传面板扩展
主要是 new ,start ,stop