文件上传控件浏览按钮只读

在使用EXT做文件上传时，上传控件的输入框需要设置为只读，只能通过点击【浏览】按钮来上传文件，禁止用户通过键盘鼠标输入字符，通过设置readonly属性，输入框是不允许用户输入了，但是发现点击【浏览】按钮也不响应了，无法上传文件。

1 html的file研究

在对HTML的file元素做研究，也发现设置readonly会存在同样的问题，网上查了查资料，可以通过禁用鼠标键盘的事件来达到这个效果，代码如下：

<input type="file" onpaste="return false" onkeydown="return false"> 

 

甚至可以绕一点弯，设置一个隐藏的file来到达目的，彻底禁止鼠标输入，代码如下：

form name=formen> <input type="file" name="picpath" id="picpath" style="display:none" mce_style="display:none" onChange="document.formen.path.value=this.value"> <input name="path" readonly> <input type="button" value="Browse" onclick="document.formen.picpath.click()"> </form>

2 ext的file研究

因此，通过屏蔽ext的file控件的键盘和鼠标事件，应该也可以做到只读效果，但是通过addListerners，添加keydown事件，发现是不起作用的。通过查资料发现，对于Ext.form的命名空间下的所有的控件，起对于键盘鼠标的事件，默认是关闭的，我们必须设置【enableKeyEvents: true】，来开启，然后处理initEvents事件就OK了，示例如下：

 new Ext.form.TextField({xtype : 'fileuploadfield',inputType : 'file',name : 'upFile',id : 'upFile',height : 20,anchor : '95%',fieldLabel : '文件选择',allowBlank : true,enableKeyEvents: true, initEvents : function() { var stopEvent = function(e){ e.stopEvent(); }; this.el.on("keypress", stopEvent, this); this.el.on("keydown", stopEvent, this); this.el.on("contextmenu", stopEvent, this); } })

 

3 处理特定键盘事件

对于鼠标单击、移动等等事件，都和Ext.EventObject相关，例如相应键盘中按下的A键：

listeners:{ specialkey:function(field,e){ if (e.getKey()==Ext.EventObject.A){ alert(); } } }

不允许用户输入大写字母：

initEvents : function() { var keyPress = function(e){ var blockchars = 'ABCDEFGHIJKMLNOPQRSTUVWXYZ'; var c = e.getCharCode(); if(blockchars.indexOf(String.fromCharCode(c)) != -1){ e.stopEvent(); } }; this.el.on("keypress", keyPress, this); }