`

ExtJs 上传控件change事件触发解决方法

阅读更多
在 Ext 中,上传控件的change事件是触发不了的,这样就造成图片预览无法进行!

看一下解决的方法吧!。。。

上传控件:
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);

分享到:
评论
7 楼 chanball 2009-05-05  
yourgame 写道
火狐和ie的file控件取值和显示value好像是有区别的
ie显示的是全路径
呼呼显示的只有文件名.这样就无法获得本地文件的绝对路径,也就不好预览图片了.请问您是怎么解决这个问题的?


firefox默认情况下是不支持本地预览的,需要修改一些属性才支持本地预览。具体的我也没弄过,现在也没时间弄了。I'm sorry.
6 楼 yourgame 2009-05-04  
火狐和ie的file控件取值和显示value好像是有区别的
ie显示的是全路径
呼呼显示的只有文件名.这样就无法获得本地文件的绝对路径,也就不好预览图片了.请问您是怎么解决这个问题的?
5 楼 wuhui 2008-09-18  
太高兴了,呵呵
4 楼 wuhui 2008-09-18  
谢谢了,我的可以动态改变图片了
3 楼 wuhui 2008-09-12  
怎么没有东西呢
2 楼 yonguo 2008-08-21  
请问你有“ Ext 中,上传控件的change事件是触发不了的,这样就造成图片预览无法进行”这个问题解决的例子吗?
1 楼 tatakautsubasa 2008-06-16  
沙发

相关推荐

    EXTJS 上传组件及示例

    - 上传组件通常与EXTJS的`Ext.form.Panel`配合使用,表单提交通常使用`Ext.Ajax.request`或`form.submit()`方法。 - `Ext.form.Basic`对象用于处理表单验证,确保所有字段都符合要求。 4. **异步上传**: - ...

    extjs5.1多文件上传控件

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

    extjs网页控件开发

    3. **事件处理**:利用ExtJS的事件系统,如change事件,来监听用户的选择并触发相应的行为。 4. **Store配置**:配置Store的proxy,连接到后台数据源,可以是JSONP、Ajax或者远程服务器。 5. **模板和渲染器**:定义...

    Extjs绚丽上传组件

    2. **事件监听**:讲解如何监听`change`事件,当用户选择文件后触发处理函数,获取文件信息,如文件名、大小等。 3. **进度条显示**:展示如何利用HTML5的FileReader API读取文件并更新上传进度,通过`progress`事件...

    ExtJs文件上传组件(UploadDialog)

    例如,`change`事件在文件选择后触发,`beforeupload`事件在上传开始前触发,可以用于验证文件类型或大小,`uploadprogress`事件则用于更新进度条状态。 4. **自定义表单提交** UploadDialog通常包含一个Ext.form....

    extjs4 文件上传

    4. **上传事件**:文件上传组件触发一系列事件,如`change`事件(当用户选择文件时触发),`beforeupload`事件(在文件上传前触发,可用于预处理或验证),以及`uploadcomplete`事件(文件上传成功后触发)。...

    extjs图片上传

    然后,可以使用`change`事件监听用户选择文件的行为,触发预览和上传操作。 预览功能通常通过HTML5的File API实现。当用户选择文件后,可以获取到文件对象,然后读取其数据URL,创建一个Image对象进行显示。这样...

    组合框combo里面change和click的区别

    - `Change`事件在用户从组合框中做出选择并确认后触发。当用户从下拉列表中选择一个新项,并且焦点离开组合框时,就会发生`Change`事件。这通常意味着当前选定的值已经发生了变化。 - 在`Change`事件的处理程序中...

    ExtJs搜索控件、插件

    你可以通过添加额外的属性和方法来定制这些控件,例如设置最小输入长度、延迟搜索触发时间、提供搜索建议等。 2. **事件处理**:`SearchField.js`可能包含了对用户输入的监听,如`keyup`、`change`或`specialkey`...

    ExtJS日期多选组件源码

    在这种情况下,"ExtJS日期多选组件源码"为我们提供了解决方案。 该组件扩展了ExtJS的基础日期选择器,实现了多选日期的功能。用户可以方便地通过该组件选取一个日期范围或单独的多个日期,并将这些日期以数组的形式...

    extjs 时间控件

    1. **时间控件组件** ExtJS 提供了多种组件来处理时间输入,如`Ext.form.field.Time`和`Ext.picker.Time`。`TimeField`(`Ext.form.field.Time`)是基于表单的输入字段,而`TimePicker`(`Ext.picker.Time`)则提供...

    ExtJS4+strtus2文件上传实例源码

    2. **上传事件处理:** 当用户选择文件后,可以监听`change`事件来触发实际的文件上传。通常,这需要与服务器端进行交互,这就引出了我们的下一个主题——Struts2。 **Struts2:** Struts2是一个基于MVC(模型-视图...

    解决Extjs上传图片无法预览的解决方法

    接下来,我们需要一个预览函数,它会在文件输入元素(`input[type=file]`)的`change`事件触发时运行,获取图片文件并显示在预览区域。这个函数可以是这样的: ```javascript var preview = function (myform, ...

    extjs 上传

    6. **事件监听**: 为了处理文件上传的生命周期,需要监听一系列事件,如`change`(文件选择后触发)、`submit`(表单提交时触发)、`success`和`failure`(服务器响应后触发)。 7. **服务器端处理**: 文件到达...

    ExtJS日期时间控件

    日期时间控件通常会触发一系列事件,如`select`、`change`等,开发者可以通过监听这些事件来执行相应的业务逻辑。同时,还需要了解如何设置验证规则,确保用户输入的有效性。 7. **响应式设计**: 现代Web应用...

    EXTJS记事本 当CompositeField遇上RowEditor

    为了解决这个问题,开发者创建了一个自定义的afterstart事件,这个事件会在RowEditor显示后立即触发,这时可以对CompositeField进行初始化。需要注意的是,RowEditor的items属性并非数组,而是对象,所以需要通过...

    Extjs4 日期控件,带年月日时分秒

    日期控件支持各种事件,如`select`(当用户选择日期时触发)、`change`(当日期字段的值改变时触发)等,这些事件可以绑定到函数来执行相应的业务逻辑。 5. **本地化** ExtJS4支持多语言,因此日期控件可以根据...

    ExtJS扩展:lovcombo(已解决Bug版)

    2. **事件监听**:lovcombo组件支持多种事件,如`select`(选中项变化)、`change`(值改变)等,可以通过监听这些事件来实现特定的功能。 3. **联动逻辑**:lovcombo的核心是联动逻辑,这需要通过编写JavaScript...

    EXTJS-upload.rar_extjs

    2. **文件上传事件监听**:当用户选择文件后,需要监听文件字段的`change`事件来触发实际的上传过程。可以通过`form.submit`方法提交表单,但需要配置适当的URL和参数。 3. **上传处理器(Upload Handler)**:...

    extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    总结来说,此代码段展示了EXTJS中如何创建一个具有交互性的表单,包括下拉列表的使用、事件监听、表单验证以及动态改变组件状态的方法。这种技术在Web应用中常用于实现用户界面的动态交互和数据验证,以提高用户体验...

Global site tag (gtag.js) - Google Analytics