###### tags: `html`, `front-end` # 【自學筆記】input file同檔案重複上傳無效問題 同上篇，這次的專案使用到`input file`處理上傳檔案的功能 然後我發現當我上傳一個檔案後，==再次上傳同一個檔案==，會完全不觸發 研究研究才發現，哦原來`input file`是使用`onchange`來觸發的 ```htmlembedded= <label class="upload-btn" @click="uploadCheck"> <span>Upload</span> <input type="file" @change="upload"/> </label> ``` --- 也就是說因==觸發條件為change==，當`input`中儲存的文件沒有變化，是不會進到函示的。 那麼處理方式也就明瞭了 :::info 方案一、刪除input的dom節點，然後再重建 ::: 應該可行，但總覺得有點蠢，所以我採用第二個方式 :::info 方案二、 ::: 上傳處理完成後清空資訊，如下 ```javascript= upload: function (e) { let file = e.target.files[0] let reader = new FileReader() reader.addEventListener('load', function () { //do something... }); reader.readAsText(file) e.target.value = ''; }, ``` 重點在於最後一句 ```javascript= e.target.value = ''; ``` 這樣做了之後，原先上傳的東西就被清掉了，下次重新上傳同一份檔案也可以順利執行了，不是多高深的問題，不過既然遇到了就筆記一下~ --- *新手工程師的筆記，純粹記錄學了些啥東西 如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*