Chrome浏览器中输入文件的onchange事件未被触发

Question

我在Chrome中发现了一个奇怪的问题。如果用户选择一个文件，然后再次通过打开文件对话框选择相同的文件，Chrome不会触发onchange事件，而Firefox会。

有人也注意到这个问题了吗？

- Amir

Answer 1

这是Chrome的一个已知特性，快速Google相关主题将会带来一些有趣的讨论。

我认为change事件不会触发是有道理的，因为没有任何变化（您选择了相同的文件）。

至于您的问题，您究竟在问什么？您是想找到改变这种行为的方法，还是只是想知道我们是否也注意到了这一点？

如果您想绕过此行为，可以在JavaScript中创建一个新的文件输入并替换以前的输入。这样您的change事件就能够确保触发了。

- Jamie Dixon

---

实际上，我只是将输入值设置为空字符串并重置它，所以如果用户选择相同的文件，我会收到该事件。我必须说，我不同意你认为这个方法符合预期的观点。我应该得到一些通知，告诉我用户已经选择了一个文件（任何文件，即使是相同的），但在这种方法中，你（程序员）无法知道发生了这个动作。 - Amir

Answer 2

function resetFileInput($element) {
  var clone = $element.clone();
  $element.replaceWith(clone);
}

然后使用：

$('#element_id').on('change', function(){
...
});

对我很有帮助！

- oreoshake

Answer 3

以下是一个更简单的解决方案，用于重置文件上传输入框，对我来说效果很好：

document.getElementById('idOfInput').value = '';

- tomahim

---

请注意，这在IE（IE8-IE11+）中不起作用，因为文件输入被标记为“只读”。另一种选择是将其包装在表单中并重置表单。 - Bob