js如何清空input?file的值
js清空input file的值
在做選擇本地圖片上傳的功能時(shí)遇到一個(gè)問(wèn)題，第一次點(diǎn)file按鈕選擇圖片完成會(huì)觸發(fā)onchange事件，獲取文件后動(dòng)態(tài)在界面上創(chuàng)建img標(biāo)簽展示，但把創(chuàng)建的img元素節(jié)點(diǎn)刪除后，再點(diǎn)file按鈕選擇同一個(gè)文件后發(fā)現(xiàn)圖片并沒(méi)有被重新創(chuàng)建出來(lái)。
分析了原因
因?yàn)樯弦淮芜x擇的文件與本次選擇的是同一個(gè)文件，兩次的路徑值相同，值沒(méi)有改變所以導(dǎo)致file不會(huì)觸發(fā)onchange事件，因此需要每次創(chuàng)建完img后重置file的value或者重置file的dom來(lái)解決這個(gè)問(wèn)題。
方案一
每次創(chuàng)建完img后把file的value值重置為空字符串（設(shè)其它值會(huì)報(bào)錯(cuò)）
提示：瀏覽器的安全機(jī)制不允許直接用js修改file的value為空字符串以外的值，強(qiáng)制修改會(huì)報(bào)以下錯(cuò)誤：
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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
深入解析js輪播插件核心代碼的實(shí)現(xiàn)過(guò)程
這篇文章主要深度揭密了js輪播插件核心代碼的實(shí)現(xiàn)過(guò)程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript中防止微信瀏覽器被整體拖動(dòng)的方法
這篇文章主要介紹了JavaScript中防止微信瀏覽器被整體拖動(dòng)的方法,需要的朋友可以參考下2017-08-08
實(shí)例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
關(guān)于javascript的運(yùn)行機(jī)制大家都應(yīng)該有所了解了吧，其實(shí)javascript是一個(gè)單線程的機(jī)制，但是因?yàn)殛?duì)列的關(guān)系它的表現(xiàn)會(huì)讓我們感覺(jué)是一個(gè)多線程的錯(cuò)覺(jué)。下面這篇文章通過(guò)實(shí)例主要給大家介紹了關(guān)于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關(guān)資料，需要的朋友可以參考下。2017-07-07
JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)設(shè)置頁(yè)面css樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
從零使用TypeScript開(kāi)發(fā)項(xiàng)目打包發(fā)布到npm
這篇文章主要介紹了從零使用TypeScript開(kāi)發(fā)項(xiàng)目打包發(fā)布到npm，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
js根據(jù)當(dāng)前日期獲取前一周或者后一周等日期
有的時(shí)候要獲取當(dāng)前日期,或者前一天、后一天的日期,下面這篇文章主要給大家介紹了關(guān)于js根據(jù)當(dāng)前日期獲取前一周或者后一周等日期的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
微信小程序如何調(diào)用json數(shù)據(jù)接口并解析
這篇文章主要介紹了微信小程序如何調(diào)用json數(shù)據(jù)接口并解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了微信小程序傳值以及獲取值方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript:FF/Chrome與IE動(dòng)態(tài)加載元素的區(qū)別說(shuō)明
今天在寫(xiě)一段js時(shí)，發(fā)現(xiàn)IE與FF在動(dòng)態(tài)加載Html元素時(shí)，有一些差別，一起過(guò)來(lái)看看下面的代碼吧2014-01-01
按下回車(chē)鍵指向下一個(gè)位置的一個(gè)函數(shù)代碼
本篇文章主要是對(duì)按下回車(chē)鍵指向下一個(gè)位置的一個(gè)函數(shù)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03