Extjs4.1 文件夹 多文件上传
Ext.define("Ext.form.field.MultiFile", { extend: 'Ext.form.field.File', alias: ['widget.multifile'], value:[], buttonOnly: true, directory:false, // false是多文件选择,true是文件夹选择 仅支持HTML5的浏览器 // 是否显示tips 展示无法使用 isTips:false, // 元素 tipEl:null, // tips元素 tooltips:null, fileEl:null, // private onRender: function() { var me = this, inputEl; me.callParent(arguments); me.createFileInput(); }, /** * @private * Creates the file input element. It is inserted into the trigger button component, made * invisible, and floated on top of the button's other content so that it will receive the * button's clicks. */ createFileInput : function() { var me = this; fileEl = me.fileInputEl.dom; me.callParent(arguments); var fileconfig = { multiple:true } if(me.directory){ fileconfig["webkitdirectory"] = me.directory; } me.fileInputEl.set(fileconfig).on('change', me.onSelectedChange, me); if(me.tipEl !=null){ me.tipEl.remove(); } me.tipEl = me.browseButtonWrap.createChild({ tag:'span', id:'', cls: 'x-btn-inner', html: '没有选择文件' }); }, clearTips:function(){ var me = this; if(me.tooltips != null){ me.tooltips.destroy(); } }, filesTips:function(){ var me = this; var fileEl = me.fileInputEl.dom; var i = 0; var filelistStr = ""; if (fileEl.files != undefined && fileEl.files != null) { if(fileEl.files.length > 0) { for (i=0; i<fileEl.files.length && i<20; i++) { filelistStr += fileEl.files[i].name+"</br>"; } } else { return; } } else { // For IE : keep only the filename and not the path return; } me.tooltips = new Ext.create('Ext.tip.ToolTip',{ target:me.tipEl, title: '文件列表', width: 200, html: filelistStr, trackMouse: true, listeners:{ show :function(tp, value, eOpts ){ var fileEl = me.fileInputEl.dom; var i = 0; var filelistStr = ""; if (fileEl.files != undefined && fileEl.files != null) { if(fileEl.files.length > 0) { } else { me.clearTips(); } } else { // For IE : keep only the filename and not the path me.clearTips(); } return true; } } }); }, onSelectedChange :function(){ var me = this; me.clearTips(); var fileEl = me.fileInputEl.dom; if (fileEl.files != undefined && fileEl.files != null) { me.tipEl.setHTML('选择了'+fileEl.files.length+'个文件'); me.filesTips(); } else { me.tipEl.setHTML('没有选择文件'); } } });
使用的时候 设置
xtype :'multifile'
directory:true,