改變文件域的樣式實(shí)現(xiàn)思路同時(shí)兼容ie、firefox
更新時(shí)間：2013年10月23日 17:10:58 作者：
正如標(biāo)題所言只是模擬了file文件域的外觀，其實(shí)起作用的還是文件域file，這樣就很方便，感興趣的朋友可以了解下
復(fù)制代碼 代碼如下:
<body>
<input type=file id="j" onchange="getValue();" style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;" />
<input id="ye" style="color: green;border: 1px solid green;width:300px;" />
<input type="button" value="File" style="border: 1px solid green;width:80px;" />
</body>
<script language="javascript">
function getValue(){
document.getElementById('ye').value = document.getElementById('j').value;
}
</script>
思路：
1、把頑固的文件域就是<input type=file /> 透明化：style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;"
2、用一個(gè)文本框和按鈕代替文件與的外觀
3、將文件域的瀏覽按鈕放到我們寫(xiě)的按鈕的上方
4、用js得到文件域value改變時(shí)的值即：得到的文件路徑，并賦給文本框的value，這樣就ok了
我只是試驗(yàn)，樣式很簡(jiǎn)陋；其實(shí)可以進(jìn)一步美化；
這樣的好處：只是模擬了file文件域的外觀，其實(shí)起作用的還是文件域file，這樣就很方便。
相關(guān)文章
JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的方法詳解
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
javascript創(chuàng)建頁(yè)面蒙板的一些知識(shí)技巧總結(jié)
javascript創(chuàng)建頁(yè)面蒙板的一些知識(shí)技巧總結(jié)...2007-08-08
原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了如何使用 JavaScript 操作瀏覽器歷史記錄 API，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了JavaScript?原始包裝類(lèi)型匯總，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
uniapp?使用?tree.js?解決模型加載不出來(lái)的問(wèn)題及解決方法
本文介紹了在uniapp中使用tree.js時(shí)遇到的模型加載不出來(lái)的問(wèn)題,并最終發(fā)現(xiàn)是由于縮放問(wèn)題導(dǎo)致的,通過(guò)調(diào)用`getFitScaleValue()`方法解決了這個(gè)問(wèn)題,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了LayUI下拉樹(shù)TreeSelect的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Decorator裝飾器是ES7的時(shí)候提案的特性，目前處于Stage?3候選階段（2022年10月）。裝飾器簡(jiǎn)單來(lái)說(shuō)就是修改類(lèi)和類(lèi)方法的語(yǔ)法糖，很多面向?qū)ο笳Z(yǔ)言都有裝飾器這一特性。本文就來(lái)說(shuō)說(shuō)如何在JavaScript中使用裝飾器，需要的可以參考一下2022-10-10
JavaScript實(shí)現(xiàn)數(shù)據(jù)可視化圖表的示例代碼
這篇文章主要介紹了如何使用JavaScript創(chuàng)建實(shí)時(shí)數(shù)據(jù)可視化圖表,我們將使用流行的圖表庫(kù),如Chart.js,來(lái)展示如何將實(shí)時(shí)數(shù)據(jù)動(dòng)態(tài)呈現(xiàn)在圖表中,感興趣的可以了解下2024-01-01
js實(shí)現(xiàn)從數(shù)組里隨機(jī)獲取元素
這篇文章主要介紹了js實(shí)現(xiàn)從數(shù)組里隨機(jī)獲取元素的方法，以及個(gè)人封裝的js代碼分享，十分的實(shí)用，這里推薦給小伙伴們2015-01-01