JavaScript打开本地文件夹的4种方法举例
作者:敲代码的柯基
这篇文章主要给大家介绍了关于JavaScript打开本地文件夹的4种方法,JavaScript在前端开发中是一种使用非常广泛的编程语言,常用于实现网页中的交互和动态效果,需要的朋友可以参考下
方法一
通过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标签,通过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标签,通过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打开本地文件夹的4种方法的文章就介绍到这了,更多相关JS打开本地文件夹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!