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

ExtJs 图片上传

    博客分类:
  • java
阅读更多
    上传控件:   
var panel3 = new ext.form.formpanel({   
    labelalign : 'left',   
         labelwidth:60,   
    border : false,   
    bodystyle : 'padding:4px;',   
    frame : false,   
    url : '../ajaxdata/uploadfile.jsp',   
    autoheight : true,   
    fileupload : true,   
    items : [{   
        id : 'file',   
        autoscroll : false,   
        xtype : 'textfield'  
                  fieldlabel:'本地上传',   
        name : 'file',   
        hidelabel : true,   
        // inputtype : 'file'//按照ext默认的属性将inputtype设为file时,始终响应不了onchange事件,结果就以autocreate的方式,如下,因为这种方式相当于html里的input,所以也就响应得了啦!   
  
        autocreate : {   
            tag : "input",   
            type : "file",   
            size : "20",   
            autocomplete : "off",   
            onchange : "browseimages(this.value);"  
        }   
    }]   
  
    ,   
    buttons : [{   
        text : '上传',   
        handler : function() {   
            panel3.getform().submit({   
                // waittitle : "请稍候",   
                waitmsg : "正在上传...",   
                success : function(form, action){},   
                failure : function(form, action) {   
                    global.alert('上传图片失败!');   
                }   
            })   
        }   
    }]   
});   
  
/*   
* 编辑  
* @date 2008 july 10  
*/  
经过实践,还存在一种可以激发change事件的方法;   
首先说一下获取form里面的field的三种方法:   
1)ext.getcmp('id');   
2)formpanel.getform().findfield('id/name');   
3)ext.get('id/name');  //前提是formpanel在界面上显示出来了   
  
应用上面的第1和第2种方法得到的组件均触发不了change事件,只有第三种方法可以   
触发,前提是formpanel要在界面上显示出来,所以需要触发show事件,然后在show   
事件里调用ext.get('id/name'),由于formpanel经常是放在ext.window里的,所   
以新的问题又来了:   
  1)调用formpanel.on('show',fn);//当window显示出来的时候,事件没有触发   
  2)调用formpanel.getform().on('show',fn);//情况同上   
  3)调用formpanel.ownerct.on('show',fn);//ok 一切搞定   
其中scope也是需要注意的一项!   
     
   如果再不行的话,可以先调用:   
      formpanel.ownerct.on('render',function(){   
          formpanel.ownerct.on('show',fn,this);   
      },this);  
 
0
0
分享到:
评论

相关推荐

    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...

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

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

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

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

    EXTJS3.0多文件上传组件

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

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

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

    EXTJS批量上传下载

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

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

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

    extjs struts2 多图片批量上传控件

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

    Extjs多文件上传

    在“Extjs多文件上传”这个主题中,我们将深入探讨如何使用ExtJS实现一个支持自由添加和减少上传文件个数的多文件上传功能。 首先,ExtJS的文件上传功能通常依赖于其组件系统,特别是`Ext.form.FileField`(也称为`...

Global site tag (gtag.js) - Google Analytics