<input type="“file”">導航回頁面時再次觸發更改事件

Question

我有一個非常基本的文件上傳器。 我上傳了一個文件，它觸發了更改事件（console.log）。 我導航到另一個頁面，然后按返回按鈕。 更改事件再次觸發（事件再次記錄到控制台）。

我正在使用 Chrome。 文本輸入不會發生這種情況； 只有文件。 有誰知道為什么？

<input type="file" />

<script>
    const input = document.querySelector("input[type=file]");
    input.addEventListener("change", console.log, { once: true });
</script>

Answer 1

使用 Chromium (Brave) 文件似乎被緩存了。 所以，當你 go 回來時，文件被加載回輸入，觸發了change事件。

一種解決方法是在頁面加載時將輸入值設置為空字符串：

<input type="file" />

<script>
    const input = document.querySelector('input[type=file]');

    window.addEventListener('load', () => (input.value = ''));
    input.addEventListener('change', console.log);
</script>