解決 JS 中 input file 無法重選相同文件的問題

問題：
移除照片後 重選相同文件沒反應、onchange沒被觸發

由於瀏覽器的文件選擇器會記錄相同的文件
所以我們要先清除 input.value
以便再次選擇相同的文件

const input = document.getElementById("upload-input");
input.value = '';

這樣問題應該就可以解決

但若網頁支援上傳多張照片時 這可能就不適用了

因為上傳了多張 但只刪除特定某一張 input value 卻整個清空 那不對
所以需要改為只刪除特定檔案

而又因為 input.files 是一個只讀屬性 無法透過 JS 直接修改 input.files 的內容
所以無法直接刪除特定文件
因此下面採取的作法是清空value後 再將特定檔案以外的檔案添加回去

範例程式碼

const input = document.getElementById("upload-input");
let currentFiles = input.files;

input.value = '';
const dataTransfer = new DataTransfer();
for (const file of currentFiles) {
    if(file.name !== ou){
        dataTransfer.items.add(file);
    }
}
input.files = dataTransfer.files;