`
yiminghe
  • 浏览: 1466269 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

 

 

  • 大小: 66.1 KB
分享到:
评论
2 楼 qfyrf 2013-04-07  
有完整例子不,哥。
1 楼 刘金剑 2011-03-22  
multiFileUploadField 未定义,是哪里错了

相关推荐

    Ext3.0实现多文件上传.rar

    4. **进度条显示**: 在描述中提到的“上传速率、进度条等”功能,是通过监听文件上传的进度事件实现的。当文件上传时,服务器会返回已上传部分的信息,这些信息被用于更新进度条,展示当前的上传状态,增强用户体验...

    Ext相册实现文件拖拽,实时上传进度,本地预览

    本教程将详细讲解如何利用EXT4、HTML5以及Servlet或Struts2技术栈来实现一个功能强大的相册系统,其中包括文件拖拽上传、实时上传进度显示以及本地预览功能。 **EXT4组件库** EXT4是一个JavaScript框架,用于构建富...

    EXT文件批量上传源代码

    EXT文件批量上传源代码是一种基于EXT JavaScript库实现的前端文件上传解决方案。EXT是一个强大的富客户端JavaScript框架,它提供了丰富的组件库,用于构建交互性强、功能丰富的Web应用。EXT的文件批量上传功能允许...

    Ext2.0 文件上传组件

    - 进度条显示:在上传过程中,组件会显示每个文件的上传进度,提供良好的用户体验。 - 错误处理:当上传失败时,组件能够捕获错误并提供相应的反馈信息。 - 文件预览:支持预览某些类型的文件,如图片,让用户...

    Ext上传文件 Demo

    5. **进度条显示**: 为了让用户了解上传进度,可以使用Ext的ProgressBar组件配合Ajax请求的事件监听。当文件上传过程中,根据服务器返回的进度信息更新进度条的状态。 6. **错误处理和验证**: 无论是前端还是后端,...

    Ext多文件上传

    4. **进度条显示**:在文件上传过程中,显示上传进度对用户体验至关重要。通过监听`progress`事件,我们可以实时更新上传进度条。ExtJS提供了`Ext.ProgressBar`组件来创建进度条,并可以通过`updateProgress`方法...

    ext多文件上传

    首先,EXTJS中的`Ext.form.Panel`组件是实现多文件上传的基础。我们需要创建一个包含`Ext.form.FileField`的表单,这是EXTJS中用于处理文件输入的组件。在`FileField`中,我们可以通过设置`multiple`属性为`true`来...

    Ext 文件上传的完整列子

    在上述代码中,我们介绍了使用ExtJS实现文件上传的基本流程,包括创建FileField、监听事件、使用FormData和XMLHttpRequest发送请求,以及在客户端显示上传进度。当然,实际应用可能需要更复杂的逻辑,如错误处理、多...

    ext上传组件,可以多文件上传

    3. **进度条和状态提示**:SwfUpload.js支持文件上传进度的实时显示,开发者可以通过监听事件来更新UI,告知用户当前的上传进度。 4. **错误处理**:当文件过大、格式不正确或网络问题导致上传失败时,组件应提供...

    ext 文件上传

    在博文《https://endeavor416.iteye.com/blog/260474》中,作者可能详细讲解了EXTJS实现文件上传的过程,包括如何配置表单、设置上传URL、监听文件选择事件、处理文件上传进度和错误等。由于无法直接访问这个链接,...

    Ext上传文件控件

    在给定的"Ext上传文件控件"中,我们关注的是ExtJS如何处理文件上传的功能。ExtJS 提供了一个名为`Ext.form.FileField`(也称为`Ext.form.field.File`)的组件,允许用户在Web表单中选择和上传文件。这个控件通常与`...

    Ext 文件上传demo

    4. **进度条显示**:为了提升用户体验,EXT Demo可能包含了文件上传进度的可视化反馈,可能是通过EXT的进度条组件`Ext.ProgressBar`实现的。 5. **事件监听**:EXT的事件驱动模型使得开发者能监听并处理文件选择、...

    EXT 3.0 文件上传对话框

    3. **进度条**:在文件上传过程中,EXT3.0的UploadDialog可能提供进度条展示,让用户了解当前上传进度,提高用户体验。 4. **错误处理**:当文件过大、格式不正确或者网络问题导致上传失败时,UploadDialog应该能够...

    Ext文件上传完整包

    通过这个"Ext文件上传完整包",开发者可以获得一个完整的文件上传解决方案,无需从零开始编写所有代码,大大提高了开发效率。在使用过程中,确保理解每个组件的工作原理和API,以便灵活地定制和扩展功能以满足特定...

    Ext 文件上传 Icons

    在本文中,我们将深入探讨如何在ExtJS框架中实现文件上传功能,并且特别关注"Ext 文件上传 Icons"这一主题。ExtJS是一个强大的JavaScript库,用于构建富客户端应用程序,其组件模型强大,支持丰富的用户界面元素。当...

    java实现文件批量上传

    同时,前端可以通过回调函数来更新UI,显示上传进度或错误信息。 在提供的压缩包`upl`中,可能包含了以下文件: 1. `SWF配置文件`:定义了文件上传的工作流程,包括步骤、事件和界面布局。 2. `EXT表单组件`:包含...

    Ext 多文件上传面板扩展

    2. **进度条**:显示每个文件上传的进度,增强用户体验。 3. **取消上传**:用户可以取消正在进行的上传操作。 4. **错误处理**:如果上传过程中发生错误,如网络问题或文件大小限制,组件应能适当地通知用户。 5. *...

    ext图片批量上传源码

    1. **上传对话框**:一个弹出式窗口,显示文件选择界面和上传进度信息。用户可以选择多个文件进行上传,同时展示每个文件的上传状态。 2. **文件选择器**:允许用户浏览本地文件系统并选择一个或多个图片文件。EXT...

    ext struts2 swfupload 跨域文件上传

    SwfUpload是一个Flash实现的文件上传组件,它允许在浏览器端进行多文件并发上传,同时支持文件预览和进度条显示。由于Flash在处理跨域请求上有一定的优势,SwfUpload常被用于解决跨域文件上传的问题。SwfUpload通过...

Global site tag (gtag.js) - Google Analytics