js如何清空input?file的值
js清空input file的值
在做選擇本地圖片上傳的功能時遇到一個問題，第一次點file按鈕選擇圖片完成會觸發(fā)onchange事件，獲取文件后動態(tài)在界面上創(chuàng)建img標簽展示，但把創(chuàng)建的img元素節(jié)點刪除后，再點file按鈕選擇同一個文件后發(fā)現(xiàn)圖片并沒有被重新創(chuàng)建出來。
分析了原因
因為上一次選擇的文件與本次選擇的是同一個文件，兩次的路徑值相同，值沒有改變所以導(dǎo)致file不會觸發(fā)onchange事件，因此需要每次創(chuàng)建完img后重置file的value或者重置file的dom來解決這個問題。
方案一
每次創(chuàng)建完img后把file的value值重置為空字符串（設(shè)其它值會報錯）
提示：瀏覽器的安全機制不允許直接用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.
var file = document.getElementById('file');
file.value = ''; //file的value值只能設(shè)置為空字符串方案二
每次創(chuàng)建完img后把file的outerHTML重置
var file = document.getElementById('file');
file.outerHTML = file.outerHTML; //重置了file的outerHTML純js清空input File
function cleanFile(id){
var _file = document.getElementById(id);
if(_file.files)
_file.value = "";
else{
if (typeof _file != "object") return null;
var _span = document.createElement("span");
_span.id = "__tt__";
_file.parentNode.insertBefore(_span,_file);
var tf = document.createElement("form");
tf.appendChild(_file);
document.getElementsByTagName("body")[0].appendChild(tf);
tf.reset();
span.parentNode.insertBefore(_file,_span);
_span.parentNode.removeChild(_span);
_span = null;
tf.parentNode.removeChild(tf);
}
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章給大家介紹了關(guān)于javascript常用關(guān)鍵字的相關(guān)內(nèi)容，文中介紹的非常詳細，并且通過一個實例代碼給大家介紹了關(guān)于Javascript關(guān)鍵字的重要性，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)吧2007-12-12
瀏覽器視頻幀操作方法?requestVideoFrameCallback()
這篇文章主要介紹了瀏覽器視頻幀操作方法?requestVideoFrameCallback()，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了js創(chuàng)建對象的方法，js一個有三種方法創(chuàng)建對象，這里為大家做一個總結(jié)，感興趣的小伙伴們可以參考一下2016-01-01
window.location.href是前端開發(fā)中一個非常重要且常用的屬性,它為我們提供了獲取和操作頁面URL的便捷手段,本文主要介紹了js中window.location.href的用法大全,感興趣的可以2023-12-12
這篇文章主要介紹了通過微信公眾平臺獲取公眾號文章的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
本篇文章主要介紹了JS傳參及動態(tài)修改頁面布局的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
原生JS實現(xiàn)風(fēng)箱式demo,并封裝了一個運動框架(實例代碼)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)風(fēng)箱式demo,并封裝了一個運動框架(實例代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)之使用云函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
js實現(xiàn)QQ面板拖拽效果（慕課網(wǎng)DOM事件探秘）（全）
這篇文章主要為大家詳細介紹了QQ面板拖拽效果，探秘慕課網(wǎng)DOM事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了JS控制輸入框內(nèi)字符串長度,需要的朋友可以參考下2014-05-05