Ext Swfupload 进度条多文上传

最新推荐文章于 2014-12-31 12:31:00 发布

原创最新推荐文章于 2014-12-31 12:31:00 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #function #header #session #null #flash

ExtJS 同时被 3 个专栏收录

11 篇文章

订阅专栏

HTML

7 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

本文介绍了在使用Ext Swfupload组件进行多文件上传时，如何处理进度条显示及解决因Flash与浏览器Session不同导致的权限验证失败问题。建议在页面加载时获取PHPSESSID并传递给Flash，确保文件上传过程中使用相同的Session数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于工作需要，自己使用extjs+swfupload写的一个多文件上传插件。

废话不说了，直接贴代码。

    Ext.ux.UploadWindow = Ext.extend(Ext.Window,{  
        width:700,  
        height:400,  
        tree:null,  
        grid:null,  
        layout:'border',  
        store:null,  
        progressBar:null,  
        animateTarget:'ux-taskbar-start',  
        constrainHeader:true,  
        initComponent:function(){  
            this.bbar = [];  
            this.items = [];  
            this.initTree();  
            this.initProgressBar();  
            this.initGrid();  
            this.rec = Ext.data.Record.create([  
                     {name: 'name'},  
                     {name: 'size'},  
                     {name: 'id'},  
                     {name: 'type'},  
                     {name: 'creationdate', type: 'date', dateFormat: 'm/d/Y'},  
                     {name: 'filestatus'}  
            ]);  
            Ext.ux.UploadWindow.superclass.initComponent.call(this);  
        },  
        initTree:function(){  
            this.tree = new Ext.Panel({  
                region:'west',  
                width:200,  
                collapsible:true,  
                split:true,  
                title:'folder list'  
            });  
            this.items.push(this.tree);  
        },  
        renderFileStatus:function(v){  
            switch(v) {  
                case -1: return('<font 

color="red">pending..</font>');  
                case 1: return('<font 

color="red">uploading...</font>');  
                case 2: return('<font color="green">finished!

</font>');  
                case 3: return('<font color="red">failure!

</font>');  
                default:  
                    return v;  
            }  
        },  
        ...................................  
        initGrid:function(){  
            this.sm = new Ext.grid.CheckboxSelectionModel({  
                singleSelect :false,  
                listeners: {  
                    selectionchange: function(sm) {  
                        if (sm.getCount()) {  
                            Ext.getCmp('startUpload').setDisabled(false);  
                        } else {  
                            Ext.getCmp('startUpload').setDisabled(true);  
                        }  
                    }  
                }  
            });  
            var cm = new Ext.grid.ColumnModel({  
                defaults: {  
                    sortable: true             
                },  
                columns: [this.sm,{  
                    id: 'name',  
                    header: 'name',  
                    dataIndex: 'name',  
                    width: 220,  
                    editor: new Ext.form.TextField({  
                        allowBlank: false  
                    })  
                }, {  
                    header: 'size',  
                    dataIndex: 'size',  
                    renderer:this.formatBytes  
                }, {  
                    header: 'type',  
                    dataIndex: 'type'  
                },{  
                    header: 'status',  
                    dataIndex: 'filestatus',  
                    renderer:this.renderFileStatus  
                }   
                ]  
            });  
      
            this.store = new Ext.data.Store({  
                reader: new Ext.data.JsonReader({  
                          id: 'id'  
                     }, this.rec)  
            });  
      
            this.grid = new Ext.grid.GridPanel({  
                region:'center',  
                layout:'fit',  
                border:false,  
                store:this.store,  
                cm:cm,  
                sm:this.sm,  
                draggable:false,  
                tbar:[{text:'selectAll',handler:this.selectAll.createDelegate(this)},  
                      {text:'Deselect',handler:this.deselectRange.createDelegate(this)},  
                      

{text:'Start',iconCls:'add',id:'startUpload',disabled:true,handler:this.startUpload.creat

eDelegate(this)},  
                      '->',

{id:'selectBtn',disabled:true,cls:'selectBtn',handle:function(){  
                }}],  
                autoExpandColumn:'name'  
            });  
            this.items.push(this.grid);  
        },  
        startUpload:function(){  
            this.upload.startUpload();  
        },  
        selectAll:function(){  
            this.sm.selectAll();  
        },  
        initProgressBar:function(){  
            this.progressBar = new Ext.ProgressBar({  
                value:.5,  
                text:'ProgressBar',  
                width:'100%'  
            });  
            this.bbar.push(this.progressBar);  
        },  
        deselectRange:function(){  
            var startRow = 0 ,endRow = this.store.data.items.length-1;  
            this.sm.deselectRange(startRow,endRow);  
        },  
        upload:null,  
        flashUrl:null,  
        ..................................................................  
    });  
    Ext.reg('uploadwindow',Ext.ux.UploadWindow);