<input type="file"> 在不同浏览器下的不同行为

• 反复选择同一文件
• 选择取消
  • 参考

<input type="file"> 是 HTML 中用于让用户选择文件的一个控件，当用户点击控件时，就会有对话框弹出让用户选择文件。这一行为在各浏览器中基本是一致的，但是却又略有不同。

反复选择同一文件

假设用户已经点击该控件，并选择了一个文件，随后，该用户再次点击控件，并且仍然选择了之前所选择的文件，那么

• 在 Firefox 浏览器中，会再一次触发 <input> 元素上的 change 事件；

• 而在其他各浏览器中，则不会有任何事发生。

选择取消

如果用户点击了控件，但在弹出的对话框中选择了取消，那么

• 在 Chrome 浏览器中，该 <input> 元素的 files 属性会被重设为空数组 []；而且如果 files 之前不为空，那么还会额外在该 <input> 元素上触发 change 事件；

• 而在其他各浏览器中，则不会有任何事发生。

值得注意的是，Chrome 是有意做成这个效果的，因为目前没有别的取消已选择的文件的办法； 而其他浏览器中的行为也是基于用户对于取消按钮的一般认知都是点击取消则什么都不会改变。

参考

• 2508 - cancel button in upload file dialog removes previously choosen file - chromium - Monorai
• 431098 – Impossible to clear file upload controls (fields)

---

我们可以看到，不同的浏览器在处理一些边界情况时有不同的考虑及对应的处理，那么我们在编写代码的时候，也同样应该对这些边界情况进行考虑，以保证代码在不同浏览器下的兼容性。