- 浏览: 1466292 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
扩展了 Ext.Panel ,加入文件框列表 ,并控制删除 ,ie预览图片等功能 ,提交后,向服务器递交 ,文件编号列表
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[i]); if (items[i]) { this.remove(this.startId + '_column_' + items[i]); if (Ext.isIE) { this.remove(this.startId + '_previewpanel_' + items[i]); } } } 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[p] = this.fileConfig[p]; } 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: [fileConfig] }, { 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 实现 文件上传 进度显示
评论
3 楼
刘金剑
2011-03-22
multiFileUploadField 未定义
2 楼
刘金剑
2011-03-22
url: 'bug/BtsSetBugDO_ext.jsp', 这个页面里是怎么处理的?
1 楼
kingtoon
2010-04-13
发表评论
-
Extjs 实践细节备忘 -3
2009-04-12 20:26 24311. dragdrop 继承层次 dd - ... -
Extjs 实践细节备忘 -2
2009-04-12 05:43 27511. grid 列宽问题 可以指定 每列的宽度数值 ... -
Extjs 实践细节备忘 -1
2009-04-11 01:47 2711在使用 extjs 开发 OAOP 应用中 ,除了API文档外 ... -
长字串换行问题
2009-03-01 23:10 5788很久没用过 ,textarea ... -
Extjs portal 应用初探
2009-02-24 23:09 6007近期在研究拖放的实现 ,看了看 Extjs 的 portal ... -
Extjs 模块化动态加载js实践
2009-01-09 18:12 23508前一段转载了一篇 透明加载外部 javascript ... -
Extjs 聊天窗口 -续3 用pushlet来实现
2008-12-23 22:16 16093前一篇 自己实现了http长连接 , 很繁琐,后 ... -
Extjs 聊天窗口 -续2 - http长连接的实现
2008-12-16 00:55 13335认为长连接就是有个http请求被服务器阻塞了 ,这样的话浏览 ... -
Extjs CRUD 模板
2008-12-12 00:52 7812也算是一个总结吧,备忘,总结了一个增删改查的例子,以后要达到的 ... -
Ext 聊天窗口的实现 - 续
2008-12-02 15:13 6701<filter> <fil ... -
Ext 树操作
2008-11-10 23:21 4504后台 树 节点 定义 menu_info { ... -
Ext 一个聊天窗口的设计
2008-11-10 00:26 37741.关键是要 弹性设计,自动适应浏览器 部件要: ... -
Ext.data.Store 与 GridFilters
2008-11-03 16:12 5366Store 每次 reload 会记着上次的参数,比如 pa ... -
Ext 实现 文件上传 进度显示
2008-10-24 18:15 5202利用了 ahxu-commons-fileuploadex-b ... -
Ext official doc - class-event-observer
2008-10-23 18:20 1440....ppt -
Ext Grid 表头显示问题
2008-09-27 23:51 3344出现问题了,当 Grid div 放在 table 布局下的话 ... -
JSON marsh && unmarsh
2008-09-23 00:46 1988Ext 端用 //Encodes an Objec ... -
[extjs] formpanel 标准提交问题
2008-09-19 02:29 3338formpanel 的 标准提交 有 bug? var ta ... -
ComboBox 传值问题
2008-09-19 00:07 5299field -> textfield->trigg ... -
Ext 2 概述
2008-09-18 01:11 2300欢迎来到Ext 2.0。 在下列各章节中,你将会接触到E ...
相关推荐
在多文件上传场景中,我们需要扩展这个组件以允许用户选择多个文件。在ExtJS 2.2版本中,虽然不直接支持多文件选择,但我们可以通过监听`change`事件并利用HTML5的多文件选择特性(`multiple`属性)来实现这一功能。...
总结来说,这些文件覆盖了EXT API的基础到进阶内容,包括EXT库的使用、组件开发、事件处理、多文件上传以及开发工具的使用,是全面学习EXT和SWFUpload的宝贵资源。通过深入学习和实践,开发者可以构建出功能强大、...
Ext JS 提供了诸如表格、树形视图、表单、面板、窗口等大量组件,而HTMLEditor就是其中的一个,用于实现富文本编辑。 2. Ext HTMLEditor组件 Ext HTMLEditor是一个强大的HTML编辑器组件,它提供了一种在浏览器中...
它提供了诸如网格面板、表单、窗口、菜单等组件,使用户可以方便地浏览、搜索、上传和下载文件。EXTJS的可定制性和灵活性使得界面既美观又高效,同时支持多种数据源,如JSON、XML或CSV。 DWR在系统中起到了桥梁的...
4. **文件上传功能**: Ext Uploader_v1.2提供了文件选择、预览、进度显示、多文件同时上传等功能。这些功能对于用户来说非常实用,尤其是对于需要处理大量文件的业务场景,如图片分享、文档上传等。 5. **异步上传*...
Ext.ux.UploadDialog是Ext 2.0框架中的一个扩展组件,主要用于实现用户友好的文件上传功能。在Web开发中,文件上传是一个常见的需求,而ExtJS作为一个强大的JavaScript库,提供了丰富的组件和功能来帮助开发者构建...
UploadDialog插件则是Ext JS生态中的一个组成部分,扩展了其核心功能,实现了文件上传对话框的功能。 该插件的核心特性包括: 1. **交互式文件选择**:UploadDialog提供了一个可定制的文件选择界面,用户可以选择...
总的来说,ASP.NET批量上传SwfUpload-Ext的组合是一种强大的解决方案,它结合了SwfUpload的高效上传能力和ExtJS的丰富交互体验,为用户提供了高效、安全的文件上传体验。在实际开发中,开发者需要根据项目需求灵活...
【标题】: "一个基于Struts和Ext的JSP文件上传网盘系统" 【描述】: 本项目是一个实现文件上传和管理功能的JSP网盘应用,它结合了Struts框架与Ext JS前端库来构建用户界面和处理业务逻辑。Struts作为一个成熟的MVC...
首先,SwfUpload 是一个JavaScript库,它允许在浏览器端进行多文件上传。其主要优点是支持预览、进度条显示以及批量上传,为用户提供了一种优雅的上传体验。SwfUpload 使用Adobe Flash插件作为其后台处理机制,因此...
- **主要用途**:指示后台操作的完成状态,如文件上传或下载过程。 **2.10 Split Button (Ext.SplitButton)** - **xtype**: `splitbutton` - **功能描述**:Split Button 是一个组合按钮,主要由一个主按钮和一个...
- **拖拽操作(Drag and Drop)**:Ext JS 提供了完整的拖拽功能支持,开发者可以通过简单的配置实现拖拽效果,如文件上传、列表排序等。 - **插件与扩展**:通过编写插件或扩展现有的组件,可以进一步增强 Ext JS ...
8.2.4 使用DirectSubmit上传文件 235 8.3 Grid组件 238 8.3.1 一个结合DataWrite和RowEditor的Grid示例 238 8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 ...
9.5.1 标签面板的构成及其运行流程:ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签面板的配置项、属性、方法和事件 / 462 9.5.3 使用标签页 / 463 9.5.4 可重用的标签页 / 465 9.6 视图与选择模型...
2. **图片上传**:EXT前端提供上传界面,通过AJAX异步提交图片到服务器,Java后端处理文件上传,可能包括文件合法性检查、重命名、存储位置管理等。 3. **图片展示**:EXT组件如网格面板用于展示图片列表,支持分页...
总结,这个Java+Ext JS实现的HTMLArea编辑器图片上传版源码例子涵盖了前端JavaScript编程、后端Java服务开发、文件上传处理、富文本编辑器扩展等多个方面的知识点,为开发者提供了一个完整的实践案例,有助于学习和...
ExtUpload是一款基于ExtJS库开发的文件上传控件,它为Web应用程序提供了强大的文件上传功能。ExtJS是一个JavaScript框架,以其丰富的用户界面组件和可扩展性而受到开发者的青睐。ExtUpload控件使得开发者能够轻松地...
4. **控件与行为**:AJAXExt库包含多种控件,如Accordion(手风琴)、AjaxFileUpload(异步文件上传)、TabContainer(选项卡容器)等。此外,还有多种行为,比如HoverMenu(悬停菜单)和Watermark(水印效果),...
在EXTJS3 SWFUpload Panel中,开发者可以利用EXTJS的布局、事件处理和数据绑定机制,构建出一个与EXTJS风格一致的文件上传面板。 SWFUpload的核心功能包括: 1. **多文件选择**:用户可以通过文件对话框一次选择多...