当选择相同文件时，HTML 输入文件选择事件不会触发。

31 浏览
0 Comments

当选择相同文件时，HTML 输入文件选择事件不会触发。

有没有可能检测到用户为HTML input 元素选择 file 类型时所作出的每一个文件选择？

这个问题以前已经被多次提出过，但通常建议使用的 onchange 事件如果用户再次选择同一个文件时不会触发。

admin 更改状态以发布 2023年5月20日
0

2 答案

0 Comments

使用 onClick 事件来清除目标输入框的值，每次用户点击该字段时。这确保了同一个文件的 onChange 事件将被触发。对我来说起作用了 🙂

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

使用 TypeScript

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

0
0 Comments

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

var input = document.getElementsByTagName('input')[0];
input.onclick = function () {
  this.value = null;
};
input.onchange = function () {
  console.log(this.value);
};


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

0