Ext 多文件上传面板扩展
扩展了 Ext.Panel ，加入文件框列表 ，并控制删除 ，ie预览图片等功能，提交后，向服务器递交 ，文件编号列表http://www.agoit.com/upload/attachment/44461/91ef5bf2-2c58-3db8-a398-1511cf685c64.png
http://www.agoit.com/upload/attachment/44463/597fe4cb-d6aa-3aac-84ea-bde59e6b11b8.png
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); if (items) { this.remove(this.startId + '_column_' + items); if (Ext.isIE) { this.remove(this.startId + '_previewpanel_' + items); } } } 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 = this.fileConfig; } 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: }, { 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 实现 文件上传 进度显示
页:
[1]