IE浏览器下的Input File详解

IE11 浏览器新鲜出炉，且不断占领着用户的桌面，颇有山雨欲来风满楼的恢弘气势。的确，IE近几个版本的表现大家有目共睹，看看css3、html5 的支持情况大pk，都想要给IE9、IE10 报以掌声了。那么IE11 究竟怎样呢？还没有找到最新的资料，但冲着“Immersive Browsing” （身临其境的浏览）这个来头，和Windows8 的强大支持，作为前端的我们，是不是可以想想怎么从代码层面撩拨下，逐渐揭开它的面纱呢。 有点前端经验的同学们肯定知道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 的问题而已。 via：duitang

标签:IE浏览器HTML5IE Web