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

extjs 图片上传

阅读更多
  1. 上传控件:   
  2. var panel3 = new Ext.form.FormPanel({   
  3.     labelAlign : 'left',   
  4.          labelWidth:60,   
  5.     border : false,   
  6.     bodyStyle : 'padding:4px;',   
  7.     frame : false,   
  8.     url : '../ajaxdata/uploadFile.jsp',   
  9.     autoHeight : true,   
  10.     fileUpload : true,   
  11.     items : [{   
  12.         id : 'file',   
  13.         autoScroll : false,   
  14.         xtype : 'textfield'  
  15.                   fieldLabel:'本地上传',   
  16.         name : 'file',   
  17.         hideLabel : true,   
  18.         // inputType : 'file'//按照Ext默认的属性将inputType设为file时,始终响应不了onchange事件,结果就以autoCreate的方式,如下,因为这种方式相当于html里的input,所以也就响应得了啦!   
  19.   
  20.         autoCreate : {   
  21.             tag : "input",   
  22.             type : "file",   
  23.             size : "20",   
  24.             autocomplete : "off",   
  25.             onChange : "browseImages(this.value);"  
  26.         }   
  27.     }]   
  28.   
  29.     ,   
  30.     buttons : [{   
  31.         text : '上传',   
  32.         handler : function() {   
  33.             panel3.getForm().submit({   
  34.                 // waitTitle : "请稍候",   
  35.                 waitMsg : "正在上传...",   
  36.                 success : function(form, action){},   
  37.                 failure : function(form, action) {   
  38.                     Global.alert('上传图片失败!');   
  39.                 }   
  40.             })   
  41.         }   
  42.     }]   
  43. });   
  44.   
  45. /*   
  46.  * 编辑  
  47.  * @date 2008 July 10  
  48.  */  
  49. 经过实践,还存在一种可以激发change事件的方法;   
  50. 首先说一下获取form里面的field的三种方法:   
  51.  1)Ext.getCmp('id');   
  52.  2)FormPanel.getForm().findField('id/name');   
  53.  3)Ext.get('id/name');  //前提是FormPanel在界面上显示出来了   
  54.   
  55. 应用上面的第1和第2种方法得到的组件均触发不了change事件,只有第三种方法可以   
  56. 触发,前提是FormPanel要在界面上显示出来,所以需要触发show事件,然后在show   
  57. 事件里调用Ext.get('id/name'),由于FormPanel经常是放在Ext.Window里的,所   
  58. 以新的问题又来了:   
  59.   1)调用FormPanel.on('show',fn);//当Window显示出来的时候,事件没有触发   
  60.   2)调用FormPanel.getForm().on('show',fn);//情况同上   
  61.   3)调用FormPanel.ownerCt.on('show',fn);//OK 一切搞定   
  62. 其中scope也是需要注意的一项!   
  63.      
  64.    如果再不行的话,可以先调用:   
  65.       FormPanel.ownerCt.on('render',function(){   
  66.           FormPanel.ownerCt.on('show',fn,this);   
  67.       },this);  
分享到:
评论

相关推荐

    Extjs图片上传 带过滤和缩略图

    在"Extjs图片上传 带过滤和缩略图"这个主题中,我们将深入探讨如何使用ExtJS实现图片上传功能,同时结合过滤和缩略图显示,以提升用户体验。 1. **图片上传组件**: 在ExtJS中,可以使用`Ext.form.FileField`或`...

    extjs图片上传

    在EXTJS框架中,图片上传功能是一个常见的需求,尤其在构建富客户端应用时。EXTJS提供了强大的组件模型,使得开发...以上就是EXTJS图片上传功能的基本实现流程,通过前后端的协作,可以实现高效且安全的图片上传功能。

    EXtjs 图片批量上传

    本教程将深入探讨如何在ExtJS中实现图片的批量上传功能,以及与之相关的批量删除操作。 首先,批量上传图片的核心是利用HTML5的File API,它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...

    完整的Extjs4 htmleditor上传图片插件(包括实例和用法)

    本资源提供了一个完整的ExtJS4 htmleditor图片上传插件,包括前端和后端的实现代码,对于开发者来说是一份非常有价值的参考资料。 首先,我们来看`htmleditor`组件。在ExtJS4中,`Ext.form.field.HtmlEditor`是HTML...

    Extjs Swfupload 多图上传插件绝对可运行

    这个插件是作者对原有Swfupload组件进行改进后得到的,特别适用于需要在Web应用中实现批量图片上传的场景。 首先,我们来了解一下Extjs。Extjs是一个强大的JavaScript库,用于构建富客户端的Web应用。它提供了丰富...

    ExtJS验证上传文件类型

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

    extjs htmleditor 图片上传和添加网络图片编辑器

    总结起来,ExtJS HTMLEditor的图片上传和添加网络图片功能涉及前端的事件处理、文件上传、数据交互,以及后端的文件接收、存储和返回URL。理解和实现这些细节,可以创建出功能完备且用户体验良好的富文本编辑器。

    Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现

    这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现"将详细介绍如何使用HtmlEditor以及如何实现图片上传和显示的功能。 首先,我们需要了解HtmlEditor的基本用法。HtmlEditor通常包含一个...

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

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

    批量图片预览上传(extjs,支持html5和flash)

    在IT领域,批量图片预览上传是Web应用中常见的功能,尤其在图像处理、社交媒体或者内容管理系统中。本文将深入探讨如何使用EXTJS框架结合...理解并掌握这些知识点,能帮助开发者构建高效、安全的批量图片上传功能。

    Extjs4文件上传,后台struts2

    在本文中,我们将深入探讨如何使用ExtJS 4与Struts2框架实现文件上传功能。ExtJS是一个强大的JavaScript库,提供了丰富的用户界面组件,而Struts2是Java Web开发中的一个MVC框架,用于处理后端业务逻辑。下面,我们...

    extjs 上传图片(可以上传其他类型的文件)asp 实现

    在本文中,我们将深入探讨如何使用ExtJS框架与ASP(Active Server Pages)技术结合,实现一个功能完善的文件上传功能,特别是针对图片和其他类型文件的上传。ExtJS是一款强大的JavaScript库,用于构建桌面级的Web...

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

    在Web应用中,多文件上传功能通常用于让用户一次性上传多个文件,比如图片、文档等。ExtJS4提供了一种解决方案,允许用户通过一个交互式的界面来上传多个文件,并可以分别处理每个文件的上传状态。 **三、上传组件...

    EXTJS3.0多文件上传组件

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

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

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

    ExtJs框架系列之图片批量显示,上传,删除

    2. 实现文件上传功能,使用`FileField`和Ajax请求将图片上传至服务器。 3. 创建删除图片的功能,通过Ajax请求发送删除指令,服务器执行删除操作后更新UI。 4. 添加必要的用户体验元素,如进度条、确认对话框和错误...

    EXTJS批量上传下载

    5. **文件类型过滤**:通过配置,可以限制可上传的文件类型,如只允许上传图片或文档等。 6. **上传策略**:EXTJS支持异步上传,可以设置并发上传的数量,避免一次性上传大量文件导致服务器压力过大。 7. **错误...

    介绍如何应用ExtJs进行前后台的数据交互

    ExtJs 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件、数据绑定机制和事件处理系统,使得开发者能够创建功能丰富的、交互式的用户界面。在前后台数据交互中,ExtJs 起着至关重要...

    extjs struts2 多图片批量上传控件

    在本场景中,"extjs struts2 多图片批量上传控件"是一个集成解决方案,允许用户通过ExtJS前端框架批量上传多张图片,并通过Struts2后端框架进行处理。 **ExtJS** 是一个基于JavaScript的UI库,它提供了丰富的组件和...

    ExtJS 编写的批量上传(java实现)

    总的来说,"ExtJS编写的批量上传(Java实现)"涉及到的技术主要包括ExtJS的表单组件、文件上传、前端图片压缩、Ajax通信以及Java后端的文件处理。这个项目充分展示了前端与后端如何协同工作,为用户提供高效、安全的...

Global site tag (gtag.js) - Google Analytics