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

javascript html dom-events forms

2022-08-30 00:07:57

有没有机会检测用户为HTML类型元素所做的每个文件选择？inputfile

以前曾多次询问过此问题，但如果用户再次选择同一文件，则不会触发通常建议的事件。onchange

答案 1

在每个事件上设置 to 的值。这将重置的值并触发事件，即使选择了相同的路径。inputnullonclickinputonchange

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知道文件的绝对路径。浏览器仍然在内部知道它。

答案 2

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

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

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

使用 TypeScript

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