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,
相关推荐
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
本文将详细解析"ExtJS4多文件上传,带进度条及管理"这一主题,涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架,它提供了丰富的组件库和强大的数据绑定机制,...
在EXTJS中,`MultiFileUploadField` 是一个组件,它允许用户在单个操作中选择并上传多个文件,极大地提升了用户交互体验。这个功能对于处理大量文件上传的场景非常有用,比如在内容管理系统、图像库或者文件分享平台...
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域,特别是使用ExtJS框架进行界面设计时,文件上传功能是必不可少的一部分。然而,随着ExtJS版本的更新,原有的多文件上传组件可能不再兼容...
在"EXTJS3.0多文件上传组件"中,我们主要关注的是如何利用EXTJS3.0的功能来实现一个高效的、用户友好的多文件上传功能。 首先,`swfupload.js`是Flash-Based的文件上传库,它允许用户在不离开当前页面的情况下进行...
标题中的“ExtJS5.1多文件上传控件”指的是在Web应用中使用ExtJS框架的一个功能组件,它允许用户一次选择并上传多个文件。ExtJS是一个强大的JavaScript库,专门用于构建富客户端的桌面级Web应用程序。在版本5.1中,...
在ExtJS中实现多文件上传功能,能够极大地提升用户体验,特别是在处理大量数据或文件时。本篇文章将详细探讨如何使用ExtJS实现多文件上传,并涵盖相关的关键知识点。 一、ExtJS 文件上传组件 在ExtJS中,我们可以...
在本文中,我们将深入探讨如何使用ExtJS 3.x实现多文件上传功能,结合Struts2框架进行数据处理。首先,我们需要确保环境配置正确。在描述中提到,我们需要将一系列Struts2相关的库文件复制到项目的`WebContent\lib`...
ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的,但对于新手来说,控制文件上传类型是一个难题。例如,我们只想让用户上传特定的文件类型,例如txt文件,那么如何实现当用户上传非txt文件时,给出...
本文将深入探讨“extjs多文件上传”这一主题,结合标签“源码”和“工具”,我们将主要关注如何使用ExtJS库实现这一功能,并可能涉及第三方上传工具Plupload。 首先,ExtJS是一个基于JavaScript的UI框架,它提供了...
尽管ExtJS 2.2不直接支持多文件上传,但通过一些技巧和工作,我们依然可以构建出功能完善的多文件上传功能。在实际开发中,如果条件允许,建议升级到更高版本的ExtJS,以利用更多内置功能和优化。
在本文中,我们将深入探讨如何使用ExtJS实现多文件上传功能,而不依赖于SWFUpload插件。ExtJS是一款强大的JavaScript框架,它提供了丰富的组件和API,使得在Web应用程序中构建复杂的用户界面变得轻松易行。多文件...
ExtJS4是一个强大的JavaScript组件库,用于构建富客户端应用,而SWFUpload则是一个流行的选择,用于在浏览器中实现文件上传,特别是支持多文件选择和上传。 首先,让我们了解SWFUpload的基本原理。SWFUpload是基于...
SWFUpload是一款基于Flash的文件上传组件,它可以实现在浏览器上无刷新的多文件上传,并且支持文件上传进度显示。它通过Flash插件与JavaScript交互,隐藏了复杂的文件上传细节,让开发者能够轻松处理文件上传操作。...
此外,它还支持文件预览、进度条显示、取消上传等功能,增强了用户体验。SwfUpload使用Flash技术,因此需要用户的浏览器支持Flash插件。 【ExtJS 前端框架】 ExtJS是一个强大的JavaScript库,用于构建富客户端应用...
在ExtJS中,多文件上传控件是开发人员常用的一种功能,用于在网页上实现批量上传多个文件。这种控件允许用户一次性选择并上传多个文件,极大地提升了用户体验。 在ExtJS中实现多文件上传,主要涉及到以下几个关键...
EXTJS的文件上传组件提供了方便的方式来处理这些任务,允许用户一次性选择多个文件进行上传,极大地提高了工作效率。 批量上传文件的核心在于利用HTML5的File API,这个API允许前端程序对用户的本地文件进行操作,...
对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法(实例) 》:http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。