js清空input file的值

2022-07-22 01:06:13 字數 967 閱讀 9268

原文: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

js清空input file的value值

在做上傳本地的功能時遇到乙個問題,第一次點file按鈕選擇完成會觸發onchange事件,第二次如果選擇相同的檔案上傳,則不會觸發onchange事件,原因是 因為選擇的檔案兩次的路徑值相同,值沒有改變,所以導致file不會觸發onchange事件,因此就想到乙個解決辦法,需要每次建立完img後重置...

Html 清空Input file資料

不能採用 document.getelementbyid testfile 這樣獲取不了 file 的value值 需要通過物件的形式獲取和設定 value值 方法一 change 事件中傳入當前觸發事件 event input id testfile value 123 type file cha...

刪除或清空指定input file的value

nclick file5.createtextrange execcommand delete createtextrange版本 dhtml object model 返回值 有 語法 otextrange object createtextrange 引數 無 返回值 otextrange 物件...