Extjs 使用fileupload插件上傳文件 帶進度條顯示

一.首先我們看看官方給出的插件的解釋：

一個文件上傳表單項具有自定義的樣式，並且可以控制按鈕的文本和 像文本表單的空文本類似的其他特性。 它使用一個隱藏的文件輸入元素，並在用戶選擇文件后 在form提交的同時執行實際的文件上傳。

因為沒有安全的跨瀏覽器以編程的方式對file表單項設值的方式, 所以標准表單項的 setValue 方法是無效的。 getvalue方法的返回值取決於使用何種瀏覽器; 一些僅僅返回文件名, 一些返回一個完整的文件路徑, 一些則返回文件的虛擬路徑。

二.在我看來這個插件就是在使用Ext的時候需要用到上傳文件時的最好選擇，能夠做出效果，實現功能就是王道。

三.下面我們就看看實際運用的代碼，我會在在難懂的地方做出解釋，希望對大家的理解有所幫助。

 

uploadEvent:function(){ //自定義點擊“上傳”時觸發的事件。
        var me =this;
        var uploadArea = Ext.create('Ext.form.Panel', {
            title : '',
            width : 350,height:105,
            bodyPadding : 10,
            margin:'-15 0 0 -20',
            frame : false,
            fileUpload: true,
            items : [{
                xtype : 'filefield',
                name : 'file',
                id:'fileinput',
                margin:'5 0 0 0',
                fieldLabel : '文件路徑',
                labelWidth : 60,
                msgTarget : 'side',
                allowBlank : false,
                anchor : '100%',
                buttonText : '請選擇文件'
            }],

            buttons : [{
                text : '上傳',margin:'0 10 25 0',           
                handler : function() {
                    var url = me.getUrl('flow_check/flow_new');
                    var form = uploadArea.getForm();
                    Ext.MessageBox.show({   //顯示上傳的提示信息的窗口，有了此方法，下面的Ext.MessageBox.updateProgress函數才能使用
                       title: '請稍等',   
                       msg: '正在上傳...',   
                       progressText: '',   
                       width:300,   
                       progress:true,   //這個也是和Ext.MessageBox.updateProgress函數想對應的，必須設置為true
                       closable:false,   
                       animEl: 'loding'
                     });

                     var updateProgress = function (progress) {
                       if (progress >= 1) {
                            Ext.MessageBox.updateProgress(1, "處理完成");
                            return;
                       }

                       Ext.MessageBox.updateProgress(progress,         Math.round(progress * 100) + "%");//動態在進度條顯示百分比
                       Ext.defer(function () {//延遲500毫秒執行一次下面的函數。
                            updateProgress(progress + 0.1);
                       }, 500);
                     }

                    form.submit({//表單提交，ajax請求，配置上傳成功與失敗的函數事件。
                        url: url,
                        method: 'POST',
                        success: function(f,a) {
                            var result = Ext.JSON.decode(a.response.responseText);
                            if(result.success == true){
                                me.fileName = result.data.filename;
                                me.fileUrl = result.data.url;
                                Ext.getCmp('uploadWindow').destroy();
                                Ext.getCmp('txt_filename').setText(me.fileName);
                            }
                            Ext.MessageBox.alert("提示：",result.msg);
                        },
                        error: function() {

                        }
                    });
                }
            }]
        });

        Ext.create('Ext.Window', {//創建彈出的窗口，items設置為上面定義的uploadArea。
            title: '上傳文件',
            id:'uploadWindow',
            width:350,
            height:140,
            autoShow: true, 
            modal: true,
            y: 200,
            bodyCls: 'um-create-form',
            items: uploadArea,
            animateTarget: event.target
        });
    }    

 

這樣就能夠實現一個帶進度條的extjs上傳文件的控件了。

效果圖如下圖所示：

 

教程完了，大家還有什么不懂的，可以繼續提問。希望對大家有幫助。謝謝支持！