使用网页上传文件控件（<input type=”file” />）时，为了减少用户无意操作而导致上传路径错误，降低服务端无效请求的压力，会要求其只能通过“浏览…”按钮选择，而不能通过输入框直接输入和编辑。

虽然<input type=”file” />有一个属性readonly，但是当这个属性生效时，IE下不仅不能编辑，也不能通过“浏览…”按钮选择，而在Firefox和Opera下完全没有任何作用。所以只能通过其他手段来达到目的了，即阻止通过键盘或鼠标对文件输入框的操作。有如下三种方法：

方法1：直接通过Javascript阻止通过键盘或鼠标对文件输入框的操作

1. 利用IE独有的contenteditable属性能阻止输入框被编辑，同时给上传文件控件加入keydown时执行click方法，相当于鼠标点击了“浏览…”按钮。
2. Firefox下上传文件控件不支持click方法，只能发生keydown事件时让上传文件控件获取焦点（“浏览…”按钮获取焦点）来阻止键盘的输入，但是当输入框获取焦点时，按下退格键(backspace)时，会发生“返回上一页”的默认动作，需要额外处理。
   但是，这种处理阻止不了通过菜单栏上的粘贴和剪切按钮对文件输入框的编辑。
3. 由于键盘事件的不同，Opera下需要处理keypress事件来阻止键盘的输入。
   但是，这个方法阻止不了退格键、删除键和右键粘贴剪切菜单对文本输入框的编辑。

请看方法1的演示实例

方法2：利用浮动层遮盖住上传文件控件的输入框部分

1. Firefox和Opera下通过scrollWidth和scrollHeight来获取上传文件控件的大小，然后减去按钮部分，建立一个div层遮盖其输入框部分。
   但是，当通过键盘或者鼠标缩放网页的时候，覆盖层会错位，需要刷新才会重新复位。
2. IE下scrollWidth和scrollHeight获取的数值有问题，所以采用方法1的解决方案。

请看方法2的演示实例

方法3：用input和button伪装成上传文件控件，真正的上传文件控件透明的浮动在其上面

对于上传文件控件的处理方式和方法1一样，但是因为伪装的原因，可以解决方法1中Opera下退格键、删除键和剪切按钮对文本框的编辑，但是依旧解决不了Firefox粘贴按钮和Opera下右键粘贴按钮对其的编辑。

其实这个方法的最大好处就是可以随心所欲的修改上传文件控件的样式。

请看方法3的演示实例

方法4：利用CSS，使透明的上传控件只出现按钮部分，且浮动在指定按钮的上面

因为也是伪装，所以也可以随心所欲的控制样式，这个方法应该是比较彻底的实现了只选择不能编辑的目标。需要注意的是通过设置上传控件的font-size，可以改变它的大小。（多谢小马和许湛）

请看方法4的演示实例

ps,javascript代码是基于YUI的，目的是为了说明解决思路，转化为其他框架或者脱离框架都很容易。

标签：contenteditable, Firfox, IE, input, keydown, keypress, opera, 上传文件

作者：秦歌，时间:2007-09-15 4:30，归纳于：Javascript & DOM & AJAX，订阅：RSS 2.0，引用：Trackback

« 凌晨四点半，房子被水淹

同时上传多个文件的解决方案 »