JavaScript打開本地文件夾的4種方法舉例
更新時(shí)間：2023年07月28日 09:22:20 作者：敲代碼的柯基
這篇文章主要給大家介紹了關(guān)于JavaScript打開本地文件夾的4種方法,JavaScript在前端開發(fā)中是一種使用非常廣泛的編程語(yǔ)言,常用于實(shí)現(xiàn)網(wǎng)頁(yè)中的交互和動(dòng)態(tài)效果,需要的朋友可以參考下
方法一
通過(guò)ActiveXObject對(duì)象
比如打開C盤：
function openFileIIs(filename){
var obj=new ActiveXObject("wscript.shell");
if(obj){
obj.Run("\""+filename+"\"", 1, false );
//obj.run("osk");/*打開屏幕鍵盤*/
//obj.Run('"'+filename+'"');
obj=null;
}
}方法二
設(shè)置一個(gè)不可見的input標(biāo)簽，通過(guò)input上面的webkitdirectory 屬性打開本地文件，我寫的是vue3用法：
<div class=" button-common" @click="importFile()">導(dǎo)入
<input v-show="false"
ref="inputFile"
id="file"
type="file"
webkitdirectory
/>
</div>export default {
...
setup(){
//手動(dòng)給input綁定事件
function importFile()
this.$refs.inputFile.dispatchEvent(new MouseEvent('click'))
}
return{
importFile
}
}
}方法三
設(shè)置一個(gè)不可見的input標(biāo)簽，通過(guò)input上面的multiple 屬性打開本地文件，我寫的是vue3用法：這個(gè)屬性與webkitdirectory 的具體區(qū)別可以百度看看
<div class="import-btn button-common" @click="importStudy()"導(dǎo)入
<input type="file" ref="file" multiple="multiple" @change="onInputFileChange"
/>
</div>export default {
...
setup(){
//手動(dòng)給input綁定事件
function importFile()
this.$refs.inputFile.dispatchEvent(new MouseEvent('click'))
}
return{
importFile
}
}
}方法四
給自己定義的按鈕添加下面代碼，通過(guò)創(chuàng)建一個(gè)不可見的input標(biāo)簽實(shí)現(xiàn)
<div class=" button-common" @click="importFile()">導(dǎo)入</div>
function importFile() {
var inputObj=document.createElement('input')
inputObj.setAttribute('id','_ef');
inputObj.setAttribute('type','file');
inputObj.setAttribute("style",'visibility:hidden');
document.body.appendChild(inputObj);
inputObj.click();
inputObj.value ;
}總結(jié)
到此這篇關(guān)于JavaScript打開本地文件夾的4種方法的文章就介紹到這了,更多相關(guān)JS打開本地文件夾內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條功能
Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。這篇文章主要介紹了使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
cocos2dx骨骼動(dòng)畫Armature源碼剖析(二)
本篇主要給大家介紹cocos2dx骨骼動(dòng)畫Armature源碼剖析之flash中數(shù)據(jù)與xml中數(shù)據(jù)關(guān)系，需要的朋友一起來(lái)學(xué)習(xí)吧2015-09-09
本文主要介紹了javascript中concat方法，主要分為2小節(jié)內(nèi)容：1.concat方法的基礎(chǔ)介紹；2.從實(shí)例中感受concat方法。需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要介紹了BootStrap前端框架使用方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
js驗(yàn)證整數(shù)加保留小數(shù)點(diǎn)的簡(jiǎn)單實(shí)例
這篇文章主要介紹了js驗(yàn)證整數(shù)加保留小數(shù)點(diǎn)的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下2013-12-12
javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法
這是一道比較經(jīng)典的循環(huán)鏈表問(wèn)題，在華為上機(jī)筆試中也出現(xiàn)過(guò)。 約瑟夫環(huán)是一個(gè)數(shù)學(xué)的應(yīng)用問(wèn)題，下面這篇文章主要就給大家介紹了javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
本文主要介紹了JavaScript中作用域和作用域鏈解析，條理分明，方便理解，這里推薦給小伙伴們，有需要的朋友可以參考下2016-12-12
html5+CSS 實(shí)現(xiàn)禁止IOS長(zhǎng)按復(fù)制粘貼功能
因?yàn)樵谝苿?dòng)端APP需要實(shí)現(xiàn)長(zhǎng)按執(zhí)行別的事件，但是在iOS系統(tǒng)有默認(rèn)的長(zhǎng)按選擇復(fù)制粘貼。禁止在網(wǎng)上找了很多資料，下面小編給大家分享解決方案，一起看看吧2016-12-12
JS多個(gè)異步請(qǐng)求 按順序執(zhí)行next實(shí)現(xiàn)解析
這篇文章主要介紹了js多個(gè)異步請(qǐng)求 按順序執(zhí)行next實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09