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