`
zhuhelong520
  • 浏览: 2045 次
  • 性别: 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,

 

分享到:
评论

相关推荐

    extjs 4.2 多文件上传

    用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,

    ExtJS4多文件上传,带进度条及管理

    本文将详细解析"ExtJS4多文件上传,带进度条及管理"这一主题,涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架,它提供了丰富的组件库和强大的数据绑定机制,...

    EXTJS 多文件上传

    在EXTJS中,`MultiFileUploadField` 是一个组件,它允许用户在单个操作中选择并上传多个文件,极大地提升了用户交互体验。这个功能对于处理大量文件上传的场景非常有用,比如在内容管理系统、图像库或者文件分享平台...

    ExtJS原生多文件拖动上传组件

    ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    ### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域,特别是使用ExtJS框架进行界面设计时,文件上传功能是必不可少的一部分。然而,随着ExtJS版本的更新,原有的多文件上传组件可能不再兼容...

    EXTJS3.0多文件上传组件

    在"EXTJS3.0多文件上传组件"中,我们主要关注的是如何利用EXTJS3.0的功能来实现一个高效的、用户友好的多文件上传功能。 首先,`swfupload.js`是Flash-Based的文件上传库,它允许用户在不离开当前页面的情况下进行...

    extjs5.1多文件上传控件

    标题中的“ExtJS5.1多文件上传控件”指的是在Web应用中使用ExtJS框架的一个功能组件,它允许用户一次选择并上传多个文件。ExtJS是一个强大的JavaScript库,专门用于构建富客户端的桌面级Web应用程序。在版本5.1中,...

    extjs 多文件上传

    在ExtJS中实现多文件上传功能,能够极大地提升用户体验,特别是在处理大量数据或文件时。本篇文章将详细探讨如何使用ExtJS实现多文件上传,并涵盖相关的关键知识点。 一、ExtJS 文件上传组件 在ExtJS中,我们可以...

    ExtJS实现多文件上传UploadDialog For ExtJS3.x

    在本文中,我们将深入探讨如何使用ExtJS 3.x实现多文件上传功能,结合Struts2框架进行数据处理。首先,我们需要确保环境配置正确。在描述中提到,我们需要将一系列Struts2相关的库文件复制到项目的`WebContent\lib`...

    ExtJS验证上传文件类型

    ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的,但对于新手来说,控制文件上传类型是一个难题。例如,我们只想让用户上传特定的文件类型,例如txt文件,那么如何实现当用户上传非txt文件时,给出...

    extjs多文件上传

    本文将深入探讨“extjs多文件上传”这一主题,结合标签“源码”和“工具”,我们将主要关注如何使用ExtJS库实现这一功能,并可能涉及第三方上传工具Plupload。 首先,ExtJS是一个基于JavaScript的UI框架,它提供了...

    Extjs多文件上传

    尽管ExtJS 2.2不直接支持多文件上传,但通过一些技巧和工作,我们依然可以构建出功能完善的多文件上传功能。在实际开发中,如果条件允许,建议升级到更高版本的ExtJS,以利用更多内置功能和优化。

    extjs 多文件上传代码实例

    在本文中,我们将深入探讨如何使用ExtJS实现多文件上传功能,而不依赖于SWFUpload插件。ExtJS是一款强大的JavaScript框架,它提供了丰富的组件和API,使得在Web应用程序中构建复杂的用户界面变得轻松易行。多文件...

    Extjs4 swfupload 多文件上传

    ExtJS4是一个强大的JavaScript组件库,用于构建富客户端应用,而SWFUpload则是一个流行的选择,用于在浏览器中实现文件上传,特别是支持多文件选择和上传。 首先,让我们了解SWFUpload的基本原理。SWFUpload是基于...

    extjs swfupload .net 多文件带进度条上传

    SWFUpload是一款基于Flash的文件上传组件,它可以实现在浏览器上无刷新的多文件上传,并且支持文件上传进度显示。它通过Flash插件与JavaScript交互,隐藏了复杂的文件上传细节,让开发者能够轻松处理文件上传操作。...

    swf+Extjs+java多文件上传项目

    此外,它还支持文件预览、进度条显示、取消上传等功能,增强了用户体验。SwfUpload使用Flash技术,因此需要用户的浏览器支持Flash插件。 【ExtJS 前端框架】 ExtJS是一个强大的JavaScript库,用于构建富客户端应用...

    extjs 多文件上传控件

    在ExtJS中,多文件上传控件是开发人员常用的一种功能,用于在网页上实现批量上传多个文件。这种控件允许用户一次性选择并上传多个文件,极大地提升了用户体验。 在ExtJS中实现多文件上传,主要涉及到以下几个关键...

    批量上传文件 EXTJS文件上传 上传组件

    EXTJS的文件上传组件提供了方便的方式来处理这些任务,允许用户一次性选择多个文件进行上传,极大地提高了工作效率。 批量上传文件的核心在于利用HTML5的File API,这个API允许前端程序对用户的本地文件进行操作,...

    ExtJS4 上传文件类型和大小的判断方法(实例)

    对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法(实例) 》:http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。

Global site tag (gtag.js) - Google Analytics