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

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

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

图1：input file 的组成

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

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

input file in Chrome input file in Firefox

input file in Opera input file in IE

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

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

12条评论

  2. file在任何浏览器下 默认size属性都是20

  3. 楼主 汇报一个错误 ie10下 发布报错 –“缺少message参数 ”

  4. 楼主 两个小建议啊1:回复 回复不了 我是linux 谷歌浏览器2: 回复的时候 网址那里 我认为不要写默认值 http:// 更好 因为点击发布的时候 浏览器会检测 type=url选项

    1. 此回复在 ubuntu chrome 下评论目前用的是多说的插件，难以修改…

  5. 楼主我又发现一个有趣的现象 linux 火狐20 下 再次选择上次选择的文件时可以触发 onchange 事件

  6. 第7点的错误在哪里？如何使用键盘的tab+enter键完成鼠标的选择文件的功能，ie下虽然可以弹出文件选择框，但是submit时，文件被清空导致无法上传文件。

评论已关闭。