Ext 实现 文件上传 进度显示

利用了 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