Ext 多文件上传面板扩展

扩展了  Ext.Panel ，加入文件框列表 ，并控制删除 ，ie预览图片等功能 ，提交后，向服务器递交 ，文件编号列表

 

 

 

 

 

 

 

if (!yiminghe)
 var yiminghe = {};
yiminghe.multiFileUploadField = Ext.extend(Ext.Panel, {
    layout: 'fit',
    //文件编号Id的前缀
    startId: 'multi_file_up',
    //最多上传文件数目
    limit: 3,
    initComponent: function() {
        //文件编号Name的前缀，用于向服务器提交
        if (!this.startName)
        this.startName = this.startId;
        this.items = {
            xtype: 'hidden',
            value: '',
            name: this.startName + '_count',
            id: this.startId + '_count'
        };
        yiminghe.multiFileUploadField.superclass.initComponent.call(this);
        this.num = 0;
    },
    // private
    onRender: function(ct, position) {

        yiminghe.multiFileUploadField.superclass.onRender.call(this, ct, position);

    },

    //删除面板的全部文件框
    delAll: function() {
        var files = Ext.getCmp(this.startId + '_count').getValue();
        //alert('|' + files + '|');
        var items = files.split(' ');
        for (var i = 0; i < items.length; i++) {
            //alert(items[i]);
            if (items[i]) {
                this.remove(this.startId + '_column_' + items[i]);
                if (Ext.isIE) {
                    this.remove(this.startId + '_previewpanel_' + items[i]);
                }
            }
        }
        this.num = 0;
        Ext.getCmp(this.startId + '_count').setValue('');
    },
    //面板中是否有文件
    isEmpty: function() {
        var files = Ext.getCmp(this.startId + '_count').getValue();
        return files.trim() == '';
    },
    //向面板中加入文本框
    addFile: function() {

        var files = Ext.getCmp(this.startId + '_count').getValue().trim();
        if (files.split(' ').length >= this.limit) {
            alert('最多能上传 ' + this.limit + ' 个文件！');
            return;
        }
        this.num++;
        var curNum = this.num;
        Ext.getCmp(this.startId + '_count').setValue(Ext.getCmp(this.startId + '_count').getValue() + " " + curNum);
        var fileConfig = {};
        for (var p in this.fileConfig) {
            fileConfig[p] = this.fileConfig[p];
        }
        fileConfig.id = this.startId + '_file_' + curNum;
        fileConfig.name = this.startName + '_file_' + curNum;
        var startId = this.startId;
        fileConfig.listeners = {
            'fileselected': function(c, v) {
                Ext.getCmp(startId + '_title_' + curNum).setValue(yiminghe.multiFileUploadField.getFileName(v));
                if (Ext.isIE) {
                    yiminghe.multiFileUploadField.preview(v, startId + '_previewpanel_' + curNum, startId + '_previewdiv_' + curNum);
                }
            }
        };
        var n = this.add({
            layout: 'column',
            autoHeight: true,
            id: this.startId + '_column_' + curNum,
            items: [
            {
                columnWidth: .5,
                layout: 'form',
                labelWidth: this.labelWidth,
                items: [{
                    xtype: 'textfield',
                    fieldLabel: '文件名称',
                    id: this.startId + '_title_' + curNum,
                    anchor: '95%',
                    name: this.startName + '_title_' + curNum
                }]
            },
            {
                columnWidth: .3,
                layout: 'form',
                labelWidth: this.labelWidth,
                items: [fileConfig]
            },
            {
                columnWidth: .2,
                layout: 'form',

                items: [{
                    xtype: 'button',
                    text: '清除',
                    handler: function() {
                        this.remove(n);
                        if (Ext.isIE) {
                            this.remove(Ext.getCmp(this.startId + '_previewpanel_' + curNum));
                        }
                        Ext.getCmp(this.startId + '_count').setValue(Ext.getCmp(this.startId + '_count').getValue().replace(' ' + curNum, ''));
                    },
                    scope: this
                }]
            }

            ]
        });
        if (Ext.isIE) {
            this.add({
                xtype: 'panel',
                html: '<div id="' + this.startId + '_previewdiv_' + curNum + '" ext:qtip="TODO" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod = scale );">' +
                '</div><br><br>',
                title: '图片预览',
                collapsible: true,
                hidden: true,
                id: this.startId + '_previewpanel_' + curNum

            });
        }
        this.doLayout();
    },
    afterRender: function() {
        yiminghe.multiFileUploadField.superclass.afterRender.call(this);
    }
});

yiminghe.multiFileUploadField.getFileName = function(file)
 {
    var i = file.lastIndexOf("/");
    if (i == -1){
        i = file.lastIndexOf("\\");
    }
    var name = file;
    if (i != -1){
        name = file.substring(i + 1, file.length);
    }
    var j = name.lastIndexOf(".");
    if (j != -1){
        return name.substring(0, j);
    }else{
        return name;
    }
}

yiminghe.multiFileUploadField.getFileExt = function(file)
 {
    var i = file.lastIndexOf(".");
    if (i == -1){
        return "";
    }
    var t = file.substring(i + 1, file.length);
    var j = t.lastIndexOf("/");
    if (j == -1){
        j = t.lastIndexOf("\\");
        if (j == -1){
            return t;
        }
    }
    return "";
}

yiminghe.multiFileUploadField.preview = function(fname, panel, div) {
    var fext = yiminghe.multiFileUploadField.getFileExt(fname).toLowerCase();
    if (fext == "gif" || fext == "bmp" || fext == "jpg" || fext == "jpeg" ||
    fext == "png") {
        Ext.getCmp(panel).body.hide();
        var newPreview = document.getElementById(div);
        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fname;
        newPreview.style.width = "400px";
        newPreview.style.height = "300px";
        Ext.getCmp(panel).show();
        Ext.getCmp(panel).body.slideIn('l', {
            stopFx: true,
            duration: .2
        });
    } else {
        Ext.getCmp(panel).hide();
    }
}
Ext.reg('multifileupload', yiminghe.multiFileUploadField);

 

 

 

外部调用:  使用了 Ext 例子 自带的 fileuploadfield 组件

 

var fileConfig = {
    xtype: 'fileuploadfield',
    emptyText: '选择文件上传',
    fieldLabel: '上传文件',
    anchor: '95%',
    listeners: {
        'fileselected': function(c, v) {
         }
    },
    buttonCfg: {
        text: '',
        iconCls: 'upload-icon'
    }
};

var eform = new Ext.FormPanel({
    labelAlign: 'left',
    frame: true,
    animCollapse: true,
    fileUpload: true,
    labelWidth: 70,
    method: 'POST',
    id: 'resolveBug_form',
    defaults: {
        anchor: '95%',
        msgTarget: 'side'
    },
    items: [
    {
        xtype: 'multifileupload',
        fileConfig: fileConfig,
        id: 'multi_test_resolve',
        startId: 'resolveBug_files',
        startName: 'editBug_files',
        labelWidth: 70,
        limit: 3
    }],
    listeners: {
        beforeaction: function() {
            if (!window.fileProgressPanel) {
                window.fileProgressPanel = new yiminghe.fileProgressPanel();
            }
            if (!Ext.getCmp('multi_test_resolve').isEmpty())
            window.fileProgressPanel.start();
            else
            Ext.MessageBox.wait('正在提交');
        },
        actioncomplete: function() {
            if (!Ext.getCmp('multi_test_resolve').isEmpty()) {
                window.fileProgressPanel.stop();
                Ext.getCmp('multi_test_resolve').delAll();
            }
            else
            Ext.MessageBox.hide();
            eform.form.reset();

        },
        actionfailed: function() {
            if (!Ext.getCmp('multi_test_resolve').isEmpty())
            window.fileProgressPanel.stop();
            else
            Ext.MessageBox.hide();
        }
    },
    buttons: [{
        text: '添加文件',
        handler: function() {

            Ext.getCmp('multi_test_resolve').addFile();
        }
    },
    {
        text: '确定',
        handler: function() {
            if (eform.form.isValid()) {

                eform.form.submit({
                    url: 'bug/BtsSetBugDO_ext.jsp',
                    success: function(form, action) {
                        //Ext.Msg.alert('成功', '修改成功！');
                        window.grid.reload();
                        if (window.grid2 && window.w_bug.isVisible()){
                            window.grid2.reload();
                        }
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('失败', action.result.data.info);
                    }
                    // waitMsg : '正在保存数据，稍后...'
                });
                window.resolve_bug.hide();
            } else {
                // Ext.Msg.alert('信息', '请填写完成再提交!');
                }
        }
    }]
});

 

关于 fileProgressPanel 详见

Ext 实现 文件上传 进度显示