input[type=file] 更改事件在 Chrome 上偶尔会丢失答案

【问题标题】：input[type=file] change event are lost occasionally on Chromeinput[type=file] 更改事件在 Chrome 上偶尔会丢失
【发布时间】：2017-06-06 23:09:03
【问题描述】：

我正在尝试通过普通的<button> 模拟input[type=file]，在大多数情况下它运行良好，但有时change 事件不会被触发。

var count = 0;
button.addEventListener('click', function (e) {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.onchange = function (e) {
    const file = e.target.files && e.target.files[0];
    if (file) {
        $('span').text(`file size: ${file.size}, action count: ${++ count}`);
    }
  };
  document.body.appendChild(input);
  input.click();
  document.body.removeChild(input);
}, false)

jsfiddle

以下是重现问题的步骤：

点击按钮，然后选择一个文件。
查看动作计数是否增加。
重复上述步骤

通常情况下，每次选择文件后，动作计数都会增加 1，即使与之前的文件相同（因此这不是 value-not-changed 类型的问题）。 p>

但是，有时在选择文件后，什么也没有发生。实际上，这种情况经常发生，但不规则。例如，我只是将上述步骤重复了 7 次，并得到了一个事件丢失。有时我必须重复几十次才输。对于经常选择文件的用户来说，这是一个明显的问题。

这似乎只发生在 Chrome 上，在 Chrome 48-51 上重现，我想知道是否有人碰巧遇到同样的问题并得到解决方案？谢谢。

【问题讨论】：

“有时更改事件不会被触发” 无法在 chromium 51 处重现

标签： javascript google-chrome

【解决方案1】：

重用输入元素有帮助：

const input = document.createElement('input');
input.type = 'file';

button.addEventListener('click', function() {
  input.onchange = function() {
    // deal with input.files here
  };

  input.value = '';
  input.click();
}, false);

在您的情况下，甚至不需要每次都替换 input.onchange，因为它不依赖于按钮的 onClick 处理程序的关闭（因此您只需重置值并触发点击事件），但是我决定这样写，以防有人确实需要关闭（就像我一样）。

将input.click() 放入setTimeout 似乎也有帮助，但它在更重的页面上中断了。

至于为什么会发生这种情况 - 我不知道。已经挖掘和调试了几个小时，nada。有一个 very similar question 在您发布一个月后发布，但仍未得到答复。

【讨论】：