Question

我正在尝试通过普通input[type=file]来模拟<button>，但在大多数情况下它运行良好，但有时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，即使文件与之前相同（因此这不是值不变的问题）。

但是，有时在选择文件后，没有任何反应。实际上这种情况经常发生但不规律。例如，我只是重复了上述步骤7次，并导致事件丢失。有时候我必须在丢失之前重复几次。对于经常选择文件的用户来说，这成为一个明显的问题。

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

Answer 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，但仍然没有得到答复。

输入[type = file]更改事件偶尔会在Chrome上丢失

1 个答案: