如何检测同一文件的input type=file "change"？

Question

214

我想在用户选择文件时触发一个事件。如果用户每次更改文件，则使用.change事件即可运行。

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

我该怎么做？

- Gadonski

23个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rui Nunes · Answer 1

你可以使用 form.reset() 来清除文件输入的 files 列表。这将重置所有字段为默认值，但在许多情况下，您可能只是在表单中使用 input type='file' 来上传文件而已。在这种解决方案中，无需克隆元素并重新挂钩事件。感谢 philiplehmann。

- Chaka15 · Answer 2

对于Angular应用程序，您可以执行以下操作：

组件的模板（.html文件）

<input
  #uploadInput
  type="file"
  multiple
  (change)="yourMethod(uploadInput.files)"
  (click)="resetUploadedDocuments($event)"
/>

组件的TypeScript文件（.ts文件）

resetUploadedDocuments(event: MouseEvent) {
  (event.target as HTMLInputElement).value = null;
}

- Stephanie Schellin · Answer 3

因此，除非您将每个文件存储并进行编程比较，否则无法百分之百确定它们是否选择了相同的文件。

与文件交互的方式（用户“上传”文件时JS执行的操作）是HTML5 File API和JS FileReader。

这些教程向您展示如何在上传文件时捕获和读取元数据（存储为js对象）。

创建一个触发“onChange”的函数，它将读取->存储->比较当前文件的元数据与先前文件。然后，当选择所需文件时，您可以触发事件。