JavaScript實現(xiàn)清空(重置)文件類型INPUT元素值的方法
本文實例講述了JavaScript實現(xiàn)清空(重置)文件類型INPUT元素值的方法。分享給大家供大家參考，具體如下：
因為安全限制，腳本是不能隨意設(shè)置其value值的，所以并不能像其它表單輸入域那樣用屬性來設(shè)置使其重置。
重置一個文件域的值，歸納起來主要有 3 種方法。
本文分析這三種方法的瀏覽器兼容性以及優(yōu)缺點，并給出一個比較完美的綜合方案的代碼和Demo。
重置文件域的三種方法：
1. 設(shè)置value屬性為空。
對于IE11以上和其它較新的非IE的現(xiàn)代瀏覽器Chrome/Firefox/Opera...有效。
2. 克隆或創(chuàng)建一個新的文件輸入元素進(jìn)行替換。
利用createElement或者cloneNode克隆或創(chuàng)建一個新元素進(jìn)行替換，適用于所有瀏覽器。缺點也很明顯，就是替換后，將丟失原先綁定的事件監(jiān)聽器，并丟失一些自定義的expando屬性。沒有這個問題的情況下可以使用，不通用，我不建議使用這個方法。
3. 調(diào)用表單form元素的reset()方法。
form元素的reset()方法會重置表單內(nèi)的所有輸入元素，這并不是我們期望的，所以可以變通一下，創(chuàng)建一個新的form對象，將文件input元素放進(jìn)去之后再reset，再把文件input元素取出來放回原處，這樣就不會出現(xiàn)方法2的弊端了。
利用方法1和方法3結(jié)合，可以做到兼容所有瀏覽器。
JavaScript函數(shù)代碼如下：
function clearInputFile(f){
if(f.value){
try{
f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
}catch(err){
}
if(f.value){ //for IE5 ~ IE10
var form = document.createElement('form'), ref = f.nextSibling, p = f.parentNode;
form.appendChild(f);
form.reset();
p.insertBefore(f,ref);
}
}
}
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了bootstrap警告框使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
js使用oclif開發(fā)命令行工具實現(xiàn)批量修改文件名
前端開發(fā)工作中常用的很多CLI命令相信大家已經(jīng)很熟悉了,很方便很實用,能夠快速幫助你創(chuàng)建項目,快速執(zhí)行某些重復(fù)性操作,下面我們就來學(xué)習(xí)一下如何使用CLI命令批量修改文件名吧2023-12-12
JavaScript修改css樣式style動態(tài)改變元素樣式
修改css樣式style在某些情況下還是比較實用的，可以動態(tài)改變一些樣式，接下來為大家介紹下使用JavaScript是如何做到的2013-12-12
bootstrap datetimepicker日期插件超詳細(xì)使用方法介紹
本篇文章主要介紹了bootstrap datetimepicker日期插件超詳細(xì)使用方法介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
下面小編就為大家?guī)硪黄齽t js分轉(zhuǎn)元帶千分符號詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了使用js實現(xiàn)一個簡單的滾動條過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實例代碼
本文通過實例代碼給大家介紹了Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-06-06
JS實現(xiàn)的Unicode編碼轉(zhuǎn)換操作示例
這篇文章主要介紹了JS實現(xiàn)的Unicode編碼轉(zhuǎn)換操作,結(jié)合完整實例形式分析了javascript實現(xiàn)Unicode編碼轉(zhuǎn)換的具體操作技巧,需要的朋友可以參考下2017-04-04
???????分享7?個實用?TypeScript?單行代碼
這篇文章主要介紹了???????分享7?個實用?TypeScript?單行代碼，其中包括泛型、斷言等高級用法，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-05-05
IE8 內(nèi)存泄露(內(nèi)存一直增長 )的原因及解決辦法
最近開發(fā)的時候?qū)撁媸褂昧硕〞r的局部更新，結(jié)果在ie6，7和Firefox下，一切正常，而在ie8下過上幾個小時就瀏覽器就崩潰了，顯示是內(nèi)存溢出，下面由腳本之家小編給大家介紹ie8下內(nèi)存一直增長內(nèi)存泄漏的原因及解決辦法，需要的朋友一起學(xué)習(xí)吧2016-04-04