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

本文探讨了文件选择输入控件(input type=file)在IE、Firefox、Chrome及Opera等浏览器中的表现差异,包括按钮位置、宽度控制、触发方式及文件路径显示等方面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文件选择(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 来查看,比如我的这个

 

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值