Ext plupload封裝使用

/****************************************************************
* 文件名: PluploadModule.js
* 作者:  leos
* 文件創建時間: 2019.12.25
* 文件描述: class PluploadModule 上傳模塊
*******************************************************。********/
Ext.define('XXXX.XXXX.Plupload.PluploadModule', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.pluploadmodule',
    requires: [
        'Ext.ux.statusbar.StatusBar',
        'Ext.ux.statusbar.ValidationStatus'
    ],
    constructor: function(config)
    {
        var me = this;
        Ext.apply(me, config);
        me.callParent(arguments);
    },
    id: 'plupload-win',
    view:null,
    init: function (cmp) {
        var me = this,
         uploader = cmp.uploader;

        cmp.on({
            filesadded: {
                fn: function (uploader, files) {
                    me.createWindow(uploader).show();
                },
                scope: me
            },
            updateprogress: {
                fn: function (uploader, total, percent, sent, success, failed, queued, speed) {
                    var t = Ext.String.format('Upload {0}% ({1} von {2})', percent, sent, total);   
                    me.statusbar.showBusy({
                        text: t,
                        clear: false
                    });
                },
                scope: me
            },
            uploadprogress: {
                fn: function (uploader, file, name, size, percent) {
                    // me.statusbar.setText(name + ' ' + percent + '%');
                },
                scope: me
            },
            uploadcomplete: {
                fn: function (uploader, success, failed) {
                    if (failed.length == 0)
                        me.window.hide();
                },
                scope: me
            }
        });

        me.statusbar = new Ext.ux.StatusBar({
            dock: 'bottom',
            //id: 'form-statusbar',
            defaultText: 'Ready'
        });
            me.view = new Ext.grid.Panel({
                store: uploader.store,
                stateful: true,
                multiSelect: true,
                //hideHeaders: true,
                stateId: 'stateGrid',
                columns: [
                    {
                    text: '文件名稱',
                    flex: 1,
                    sortable: false,
                    dataIndex: 'name'
                },
                        {
                            text: '文件大小',
                            flex: 1,
                            sortable: true,
                            align: 'right',
                            renderer: Ext.util.Format.fileSize,
                            dataIndex: 'size'
                        },  
                        {
                            text: 'Change',
                            width: 75,
                            sortable: true,
                            hidden: true,
                            dataIndex: 'percent'    
                        },
                        {
                            text: 'status',
                            width: 75,
                            hidden: true,
                            sortable: true,
                            dataIndex: 'status'
                        },
                        {
                            text: '消息',
                            flex: 1,
                            sortable: true,
                            dataIndex: 'msg'
                        }],
                viewConfig: {
                    stripeRows: true,
                    enableTextSelection: false
                },
                dockedItems: [{
                    dock: 'top',
                    enableOverflow: true,
                    xtype: 'toolbar',
                    style: {
                        background: 'transparent',
                        border: 'none',
                        padding: '5px 0'
                    },
                    listeners: {
                        beforerender: function (toolbar) {
                            if (uploader.autoStart == false)
                                toolbar.add(uploader.actions.start);
                                toolbar.add(uploader.actions.cancel);
                                toolbar.add(uploader.actions.removeAll);
                            if (uploader.autoRemoveUploaded == false)
                                toolbar.add(uploader.actions.removeUploaded);
                        },
                        scope: me
                    }
                },
                        me.statusbar]
            });
    },

    // begin createWindw
    createWindow: function (store) {
        var me = this;
        console.log(me.view)
        win = new Ext.Window({
            title: '上傳進度',
            width: document.body.clientWidth * 0.9,
            height: document.body.clientHeight * 0.8,
            modal: true, // harry
            constrain: true,
            border: false,
            layout: 'fit',
            items: me.view,
            closeAction: 'hide',
            listeners: {
                hide: function (window) {
                },
                scope: this
            }
        });
        return win
    }
});

包含進度，速度，大小上傳窗口

 

緊接着再去封裝一個xtype組件 啓用別名cutomuploadbutton

/****************************************************************
 * 文件名: Plupload.js
 * 作者:  leos
 * 文件創建時間: 2019.11.20
 * 文件描述: 擴展Ext的上傳組件類，
 ***************************************************************/
Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': 'http://extjs.cachefly.net/extjs-4.1.1-gpl/examples/ux/',
         'Ext.ux.upload': '../../ext4/upload/ux/upload'
    }
});
Ext.define("XXXX.XXXX.Plupload.Plupload", {
    extend: 'Ext.ux.upload.Button',
    requires: [
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',   
        'Ext.state.*',
        'Ext.ux.upload.Button',
        //'Ext.ux.upload.plugin.Window',
        'XXXX.XXXX.Plupload.PluploadModule'
    ],
    alias: ['widget.cutomuploadbutton'],
    text: '上傳',
    SelectedObjectId: 0,
    plugins: [{
        ptype: 'pluploadmodule',
        pluginId: 'pid',
    }],
    listeners: {
        filesadded: function(uploader, files) {
            return true;
        },
        beforeupload: function(uploader, file) {},
        fileuploaded: function(uploader, file) {},
        uploadcomplete: function(uploader, success, failed) {},
        scope: this
    }
});

緊接着大體都已經封裝完成

使用方法

{
                            xtype: 'cutomuploadbutton',
                            //id: 'ObjectPhotosUploadBtn',
                            uploader: {
                                url:xxxxx,//服務器端接收和處理上傳文件的腳本地址，可以是相對路徑(相對於當前調用Plupload的文檔)，也可以是絕對路徑
                                multipart_params: {//上傳時的附加參數，以鍵/值對的形式傳入，服務器端可是使用$_POST來獲取這些參數。比如
                                    xxx: 'xxx',
                                    xxx: 'xxx',
                                },
                                //uploadpath: '/Root/files',
                                autoStart: true,//自動上傳
                                max_file_size: '99999mb',//配置了請求大小,前端配置已成功，應該是大於了後端上傳限制
                                //drop_element: 'dragload',拖拽上傳
                                statusQueuedText: '準備上傳',
                                statusUploadingText: '正在上傳{0}%',
                                statusFailedText: '<span style="color: red">Error</span>',
                                statusDoneText: '<span style="color: green">Complete</span>',
                                statusInvalidSizeText: '文件太大',
                                statusInvalidExtensionText: '無效的文件類型'
                            },
                            listeners: {
                                "click": function (btn,e) {
                                    var uploader = btn.uploader.uploader;
                                    var me = this;
                                    var getPath = "";
                                    if (me.getSelectionModel().getSelection().length > 0) {
                                        getPath = me.getSelectionModel().getSelection()[0].data.path;
                                    } else {
                                        getPath = me.currentPath;
                                    }
                                    if (getPath != "/opt/resources") {    //校驗通過
                                        uploader.disableBrowse(false);
                                    } else {
                                        uploader.disableBrowse(true);
                                    }
                                },
                                filesadded: function (uploader, files) {
                                    var getPath = "";
                                    if (me.getSelectionModel().getSelection().length > 0) {
                                        getPath = me.getSelectionModel().getSelection()[0].data.path;
                                    } else {
                                        getPath = me.currentPath;
                                    }
                                    uploader.multipart_params.remotePath = getPath//在上傳前傳入參數路徑
                                    return true;
                                },
                                scope: this
                            }
                        }