如何检测同一文件的输入类型=文件“更改”？

Question

我想在用户选择文件时触发一个事件。如果用户每次都更改文件，则使用 .change 事件执行此操作。

但是如果用户再次选择相同的文件，我想触发该事件。

1. 用户选择文件 A.jpg （事件触发）
2. 用户选择文件 B.jpg （事件触发）
3. 用户选择文件 B.jpg （事件不触发，我希望它触发）

我该怎么做？

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

Answer 1

你可以欺骗它。删除文件元素并将其添加到 change 事件的相同位置。它将擦除文件路径，使其每次都可以更改。

jsFiddle 上的示例。

或者您可以简单地使用 .prop("value", "") ，请参阅 jsFiddle 上的此示例。

• jQuery prop
• 早期版本 attr

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

Answer 2

如果您使用的是 React，只需添加一个密钥即可解决此问题。

 let uid = 0;

function Example() {
  const [fileState, setFileState] = useState({
    key: uid,
  });

  function handleChangeSelectFile() {
    setFileState({
      key: ++uid,
    })
  }

  return (
    <input
      type="file"
      accept="image/jpeg,image/png"
      key={fileState.key}
      onChange={handleChangeSelectFile}
    />
  )
}

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