Ext Swfupload 进度条 多文上传

7 篇文章 0 订阅
3 篇文章 0 订阅
本文介绍了在使用Ext Swfupload组件进行多文件上传时,如何处理进度条显示及解决因Flash与浏览器Session不同导致的权限验证失败问题。建议在页面加载时获取PHPSESSID并传递给Flash,确保文件上传过程中使用相同的Session数据。
摘要由CSDN通过智能技术生成
由于工作需要,自己使用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);  




备注,若后台在文件上传时遇到提交失败,那可能是你在提交到后台文件时进行了权限验证,因为flash中的session数据跟浏览器本身使用的session不是同一个,在这里进行权限验证时需进行另外的处理,否则直接使用session进行权限验证将会导致因权限不足导致文件上传失败。

解决方法:可以在页面加载时候首先获取到PHPSESSID,然后赋值javascript,再由flash递交到后台。这样可以保证flash和浏览器直接的session使用的是同样数据。

代码下载地址:http://download.csdn.net/detail/phiberg/4172462


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值