IE浏览器下的Input File详解
来源:互联网 发布:e4a网络验证授权系统 编辑:程序博客网 时间:2024/05/22 01:41
有点前端经验的同学们肯定知道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
- IE浏览器下的Input File详解
- ie下 input file 双击问题
- File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
- File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
- input file 浏览器兼容问题
- input file 浏览器兼容问题
- 解决在高版本浏览器下的input type="file"的路径问题
- 对input设置height在非ie浏览器下失效
- Html input[type=file]在chrome浏览器和safari浏览器 与 IE firefox差别修改
- 删除IE input 下的小叉叉
- 获取input-file的文件名、后缀名(兼容IE)
- Html Input File Preview 选择后立即预览 兼容IE,Firefox,Chorom等主流浏览器
- input type="file" 选取文件路径时出现fakepath问题IE浏览器解决办法
- 解决input的file类型各浏览器的样式兼容
- safari浏览器下 input 表单的阴影
- 在不同浏览器中获取File Input的路径
- ie浏览器file文件安全不能修改的问题
- 当input进行disable后修改input的背景 ---->适用IE浏览器
- ehcache memcache redis 三大缓存男高音
- eclipse的安卓开发插件『ADT』在线安装不成功的解决方案
- Android之wrap_parent,match_parent,fill_parent的区别与联系
- oracle11g dataguard 完全手册
- GCD的介绍
- IE浏览器下的Input File详解
- Android RSA加密解密
- listView的可重用机制对性能的影响
- EditText输入格式设置
- Asp.NET MVC X.PageList.MVC 分页详解以及自定义样式
- ubuntu挂载到开发板某个目录
- Android AlarmManager实现不间断轮询服务
- canvas绘制矩形
- LeakCanary:简单粗暴的内存泄漏检测工具