JavaScript打开本地文件夹的4种方法举例
作者:青山有信时间:2026-10-30 22:19:19浏览:464
本文介绍了JavaScript中打开本地文件夹的四种实现方式。包括利用ActiveXObject调用系统组件、在Vue3中使用不可见input标签配合webkitdirectory属性、利用multiple属性以及动态创建DOM元素的方法,并附带相关代码示例。
方案一
借助ActiveXObject组件
例如启动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;
}
}方案二
配置一个隐藏的input元素,利用其webkitdirectory特性调取本地目录,此处演示vue3实现:
<div class=" button-common" @click="importFile()">导入
<input v-show="false"
ref="inputFile"
id="file"
type="file"
webkitdirectory
/>
</div>export default {
...
setup(){
//手动给input绑定事件
function importFile()
this.$refs.inputFile.dispatchEvent(new MouseEvent('click'))
}
return{
importFile
}
}
}方案三
配置一个隐藏的input元素,利用其multiple特性调取本地目录,此处演示vue3实现:该特性与webkitdirectory的具体差异可查阅网络资料
<div class="import-btn button-common" @click="importStudy()"导入
<input type="file" ref="file" multiple="multiple" @change="onInputFileChange"
/>
</div>export default {
...
setup(){
//手动给input绑定事件
function importFile()
this.$refs.inputFile.dispatchEvent(new MouseEvent('click'))
}
return{
importFile
}
}
}方案四
为自定义按钮绑定以下逻辑,通过动态生成隐藏input元素来达成目的
<div class=" button-common" @click="importFile()">导入</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 ;
}结语
至此,关于JavaScript调用本地目录的四种方式介绍完毕,更多JS操作本地目录资讯可检索本站往期文章或继续阅读后续内容,期待大家持续支持本站!
作者最新文章
Vue 3 核心变化解析:Composition API 与响应式系统详解
2026-11-03 21:33:38
viewer.js v1 升级到 v2 需要注意哪些 API 变更
2026-11-03 20:42:00
Vue3 与 React 中怎么封装 hls.js 播放器组件
2026-11-03 11:13:51
Vue.js官网访问慢或打不开怎么办?国内镜像与GitHub备用方案
2026-11-02 09:19:09
利用Axios实现无感知双Token刷新的详细教程
2026-11-01 03:11:12
