js清空input file的值

原文：js清空input file的值

 

在做選擇本地圖片上傳的功能時遇到一個問題，第一次點file按鈕選擇圖片完成會觸發onchange事件，獲取文件后動態在界面上創建img標簽展示，但把創建的img元素節點刪除后，再點file按鈕選擇同一個文件后發現圖片並沒有被重新創建出來。

 

分析了原因：

因為上一次選擇的文件與本次選擇的是同一個文件，兩次的路徑值相同，值沒有改變所以導致file不會觸發onchange事件，因此需要每次創建完img后重置file的value或者重置file的dom來解決這個問題。

 

解決方法一：
每次創建完img后把file的value值重置為空字符串

var file = document.getElementById('file');
file.value = ''; //file的value值只能設置為空字符串

 

注意：瀏覽器的安全機制不允許直接用js修改file的value為空字符串以外的值，強制修改會報以下錯誤：

VM4061:1 Uncaught DOMException: Failed to set the ‘value’ property on ‘HTMLInputElement’: This input element accepts a filename, which may only be programmatically set to the empty string.

 

解決方法二：
每次創建完img后把file的outerHTML重置 （我自己實驗這種方法並不奏效）

var file = document.getElementById('file');
file.outerHTML = file.outerHTML; //重置了file的outerHTML