`
zhuhelong520
  • 浏览: 2006 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Extjs 文件夹,多文件上传 (不支持IE)

阅读更多

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,

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics