JS點(diǎn)擊某個(gè)圖標(biāo)或按鈕彈出文件選擇框的實(shí)現(xiàn)代碼
更新時(shí)間：2016年09月27日 15:25:21 投稿：mrr
本文給大家介紹js點(diǎn)擊點(diǎn)擊某個(gè)圖標(biāo)或按鈕彈出文件選擇框的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，感興趣的朋友可以參考下
下面一段代碼是基于js實(shí)現(xiàn)的點(diǎn)擊某個(gè)圖標(biāo)或按鈕彈出文件選擇框的核心代碼，代碼比較簡(jiǎn)單，需要的朋友參考下
具體代碼如下所示：
<HTML>
<head>
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
<script type=‘text/javascript‘>
function selectFile(){
//觸發(fā) 文件選擇的click事件
$("#file").trigger("click");
//其他code如 alert($("#file").attr("value"))
}
/* 獲取 文件的路徑 ，用于測(cè)試*/
function getFilePath(){
alert($("#file").attr("value"));
}
</script>
</head>
<body>
<!-- 給這個(gè)input 設(shè)置樣式隱藏，切忌不可用display控制隱藏,可能不能跨瀏覽器 -->
<input type="file" id="file" onchange="getFilePath()"
style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/>
<button onclick="selectFile();">select file</button>
<button onclick="getFilePath()">get FilePath</button>
</body>
</html>
以上所述是小編給大家介紹的JS點(diǎn)擊某個(gè)圖標(biāo)或按鈕彈出文件選擇框的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了js防止頁(yè)面被iframe調(diào)用的方法,可防止頁(yè)面被別的網(wǎng)站iframe調(diào)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10
WordPress 單頁(yè)面上一頁(yè)下一頁(yè)的實(shí)現(xiàn)方法【附代碼】
下面小編就為大家?guī)?lái)一篇WordPress 單頁(yè)面上一頁(yè)下一頁(yè)的實(shí)現(xiàn)方法【附代碼】。小編覺(jué)得非常不錯(cuò)。給大家分享一下。希望能給大家一個(gè)參考。2016-03-03
JavaScript利用HTML DOM進(jìn)行文檔操作的方法
DOM是W3C制定的用于訪問(wèn)諸如XML和XHTML等結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)。通過(guò)本文給大家介紹JavaScript利用HTML DOM進(jìn)行文檔操作的方法，需要的朋友參考下吧2016-03-03
javascript實(shí)現(xiàn)blob加密視頻源地址的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)blob加密視頻源地址的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Javascript中的String對(duì)象,需要的朋友可以參考下2014-03-03
JavaScript中最簡(jiǎn)潔的編碼html字符串的方法
這篇文章主要介紹了JavaScript中最簡(jiǎn)潔的編碼html字符串的方法,非常非常簡(jiǎn)潔的一個(gè)方法,小編親測(cè)可用,需要的朋友可以參考下2014-10-10
下面小編就為大家?guī)?lái)一篇淺談$_FILES數(shù)組為空的原因。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JavaScript中String和StringBuffer的速度之爭(zhēng)
很多Javascript書(shū)籍中都是類比于Java說(shuō)String在頻繁的和大量的字符串連接方面的效率是不如StringBuffer的。2010-04-04
微信小程序使用WxJava獲取用戶手機(jī)號(hào)步驟
這篇文章主要介紹了微信小程序使用WxJava獲取用戶手機(jī)號(hào)的相關(guān)資料,還詳細(xì)講解了WxMpService接口的主要功能和常用方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
js數(shù)組如何添加json數(shù)據(jù)及js數(shù)組與json的區(qū)別
在JSON中，有兩種數(shù)據(jù)結(jié)構(gòu)：對(duì)象和數(shù)組。本篇文章給大家介紹js數(shù)組如何添加json數(shù)據(jù)以及js數(shù)組和json的區(qū)別，涉及到j(luò)s json數(shù)組添加相關(guān)知識(shí)，感興趣的朋友可以參考下本篇文章2015-10-10