input file 在不同浏览器中的呈现

文件选择（input type=”file”）是一个常用的元素（虽然我比较少用），在浏览器中的表现是没有完全一致的。以下是其在 IE/Firefox/Chrome/Opera 四种浏览器中的一些异同（Safari 和 Chrome 同是基于 Webkit，故不再详说）。

对于文件选择元素，可以分为2部分，一部分是按钮，一部分是文字展示，如图1：

下面图2～图5是4个浏览器对于3个不同状态下的文件选择元素的呈现：

其中：第一个是默认状态下选择了一个文件；第二个是设定了 300px 的宽度；第三个设定了 50px 的宽度；

1. 基本组成：除 Chrome 的按钮是在左边，别的文件选择的按钮都是在右边；另外，只有 Chrome 的文字部分有默认文字。
2. 宽度控制：width 在 Firefox 下不生效，Firefox 总是保存着默认宽度，大约 218px；对于别的浏览器，加长宽度只会拉伸文字部分；压缩宽度时，当文字部分已经消失，会继续压缩按钮部分。
3. 点击触发：对于按钮，单击触发是很理所当然的。对于文字部分，IE 下需要双击才能弹出文件选择框；别的都只需要单击。
4. 文字显示：选择了文件后，Chrome 只会显示文件名，而别的则会显示完整的路径；Opera 会用双引号括起来。
5. value 值：当选择了文件后，查看其 value 值时，IE 返回完整的路径；Firefox 只返回文件名；Chrome 和 Opera 返回一个 fakePath 和 文件名组成的路径，如图6。
   
6. 再次选择上次选择的文件时不会触发 onchange 事件（毕竟是没有发生改变）。
7. 文件选择无法通过调用 click() 方法或 jQuery 的 trigger(‘click’) 来触发，只能手动点击触发。此点有误，待修正。
8. 除IE外，别的浏览器都能通过 fileEle.value = ” 的方法来将其清空（但不能设置为别的值）。

更多微妙的地方可以通过写 demo 来查看，比如我的这个。

 

 

原文地址 http://liunian.info/input-file-in-different-browsers.html