IE浏览器下的Input File详解

有点前端经验的同学们肯定知道html 里的 FileUpload 对象,对应的是Input File 元素 ,为什么要说这个呢,因为 IE 浏览器在 FileUpload 对象这个点上一直表现得和其它浏览器“卓”尔不群,我们不是要揭面纱吗,这是个不错的点,可以在这个点上看看IE11跟标准浏览器以及跟IE旧版本有什么异同。安全性考量,Input File 元素的value 值(存放文件路径)是不允许Coder 使用js 设置的。这没什么好说的,但标准浏览器会更人性化一点,它允许你设置其value=”(非空值不能设置),当你刚上传完一张图片,想清理现场,可以设置 value=” ,IE却不行,你改不动它。或许你会问,这有什么影响呢?影响大着呢,当你连续两次上传同一张图片,第二次选择图片的时候是不会触发Input File 元素 onchange 事件的,但如果可以设置 value=”,就没有这个问题了。

html:

javascript:

var myt = document.getElementById('mytest');
myt.onchange = function (){
  alert('changing value :' + myt.value);
  setTimeout(function (){
    alert('设置前的value:' + myt.value);
    myt.value = '';
    alert('设置后的value:' +myt.value);
  },400)
}

运行以上代码可以验证前述“连续两次上传同一张图片,第二次选择图片的时候是不会触发Input File 元素 onchange 事件的”。

轮到IE11 出场了,如果你有幸装的是IE11,运行以上代码,IE浏览器一如既往的特立独行再次上演了。

好消息是,IE11 修正了value不能设置为空的问题;坏消息是,当你设置value=” 时,会再次触发 onchange 事件!(标准浏览器不会)

刹那间,邯郸学步、画虎类犬、画蛇添足…一堆成语涌入脑中。不解的人会说:这很符合逻辑啊,value从非空变为空确实是变化了啊,触发 onchange事件很正常啊。

只能说,逻辑上正常的东西放在特定的交互场景中也可能产生灾难。如此做法,原本响应图片选择的onchange 事件函数默默地会被 value=” 触发。前面已经说过,value只能设置为空,且只能通过js 设置为空,完全想不出在哪种情景下会希望给 value=’‘ 绑定一个监听事件,即便非要在此时执行某个方法,何不在设置 value=” 的同时直接调用这个方法?何必触发onchange 事件?更可怕的是,这个事件和常规的图片选择事件是平权的!最后的结果一定是,在所有onchange 事件函数中额外加上value判断,为空则返回。说IE11 画蛇添足一点都不为过!

不想恶意的揣测是否IE浏览器开发者自视甚高,完全不顾使用者的感受,非得弄出跟标准浏览器如出二辙的东西。从技术上说,这绝对仅仅只是一个 if else 的问题而已。


文章引用地址:http://www.iefans.net/ie-input-file/ 作者:iefans

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值