选择同一文件时未触发 HTML 输入文件选择事件

Question

是否有机会检测到用户为 HTML input 类型为 file 元素所做的每个文件选择？

这个问题之前被问过很多次，但是如果用户再次选择相同的文件，通常建议的 onchange 事件不会触发。

原文由 dronus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在每个 onclick 事件上将 null 的值设置为 input 。即使选择了相同的路径，这也会重置 input 的值并触发 onchange 事件。

 var input = document.getElementsByTagName('input')[0];

input.onclick = function () {
  this.value = null;
};

input.onchange = function () {
  console.log(this.value);
};

 <input type="file" value="C:\fakepath">

注意：如果您的文件带有’C:\fakepath’前缀，这是正常的。这是一项安全功能，可防止 JavaScript 知道文件的绝对路径。浏览器仍然在内部知道它。

原文由 Brian Ustas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

每次用户单击字段时，使用 onClick 事件清除目标输入的值。这确保了同一文件的 onChange 事件也会被触发。为我工作:)

 onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

使用打字稿

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

原文由 Rosy Shrestha 发布，翻译遵循 CC BY-SA 4.0 许可协议