改變文件域的樣式實(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、將文件域的瀏覽按鈕放到我們寫的按鈕的上方
4、用js得到文件域value改變時(shí)的值即：得到的文件路徑，并賦給文本框的value，這樣就ok了
我只是試驗(yàn)，樣式很簡(jiǎn)陋；其實(shí)可以進(jìn)一步美化；
這樣的好處：只是模擬了file文件域的外觀，其實(shí)起作用的還是文件域file，這樣就很方便。
相關(guān)文章
理解javascript中的回調(diào)函數(shù)(callback)
這篇文章主要介紹了理解javascript中的回調(diào)函數(shù)(callback),本文著重于對(duì)回調(diào)函數(shù)概念的理解,需要的朋友可以參考下2014-09-09
微信小程序?qū)崿F(xiàn)錄音時(shí)的麥克風(fēng)動(dòng)畫效果實(shí)例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)錄音時(shí)的麥克風(fēng)動(dòng)畫效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼
本文主要介紹了微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了JS閉包的學(xué)習(xí)心得，以及分析其中遇到的問題，需要的朋友跟著參考下吧。2018-04-04
本文主要介紹了ie下js不執(zhí)行的幾種可能，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了利用JavaScript的Map提升性能的方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動(dòng)畫效果實(shí)例代碼
在本篇文章里小編給大家整理了關(guān)于JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動(dòng)畫效果實(shí)例代碼，有興趣的朋友們測(cè)試下。2019-07-07
JavaScript運(yùn)動(dòng)函數(shù)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript的運(yùn)動(dòng)函數(shù)，使用實(shí)例在論證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
最近使用echarts做的一個(gè)H5的成績(jī)數(shù)據(jù)報(bào)告,里面使用了雷達(dá)圖已經(jīng)折線圖和柱狀圖,下面這篇文章主要給大家介紹了關(guān)于如何利用echarts畫雷達(dá)圖和折柱混合的相關(guān)資料,需要的朋友可以參考下2022-04-04
原生js實(shí)現(xiàn)表格循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格循環(huán)滾動(dòng)，每次滾動(dòng)一行停頓，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11