JavaScript打开本地文件夹的4种方法举例

 更新时间:2023年07月28日 09:22:20   作者:敲代码的柯基  
这篇文章主要给大家介绍了关于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打开本地文件夹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript中3个需要注意的运算符

    Javascript中3个需要注意的运算符

    这篇文章主要介绍了Javascript中3个需要注意的运算符,这3个运算符的使用有很多需要注意的地方和有意思的地方,需要的朋友可以参考下
    2015-04-04
  • JavaScript实现表格表单的随机选择和简单的随机点名

    JavaScript实现表格表单的随机选择和简单的随机点名

    本文主要介绍了JavaScript实现表格表单的随机选择和简单的随机点名,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 微信小程序实现照片裁剪

    微信小程序实现照片裁剪

    这篇文章主要为大家详细介绍了微信小程序实现照片裁剪,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 前端实现浏览器自定义滚动条写法实例

    前端实现浏览器自定义滚动条写法实例

    自定义滚动条最早是IE玩出来的,但是后来,不知道为什么IE把这个有意思的功能废弃了,下面这篇文章主要给大家介绍了关于前端实现浏览器自定义滚动条写法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 微信小程序 css使用技巧总结

    微信小程序 css使用技巧总结

    这篇文章主要介绍了微信小程序 css使用技巧总结的相关资料,需要的朋友可以参考下
    2017-01-01
  • Javascript 原型和继承(Prototypes and Inheritance)

    Javascript 原型和继承(Prototypes and Inheritance)

    前面我们看到了如何使用 constructor 来初始化对象。如果这样做,那么每一个创建的新对象都会对那些相同的属性,方法建立一个独立的副本。而实际上有更加有效的方法来指定方法,常量,以及其他一些可被所有该类的对象共享的属性。
    2009-04-04
  • JavaScript实现自动弹出窗口并自动关闭窗口的方法

    JavaScript实现自动弹出窗口并自动关闭窗口的方法

    这篇文章主要介绍了JavaScript实现自动弹出窗口并自动关闭窗口的方法,可实现从页面左侧弹出窗口5秒后窗口向右移动并消失的效果,涉及javascript针对页面窗口及样式的定义操作技巧,需要的朋友可以参考下
    2015-08-08
  • 一文教会你微信小程序如何实现登录

    一文教会你微信小程序如何实现登录

    微信小程序页面画好后,需要开始做一系列和用户的交互功能了,首先就是登录,这篇文章主要给大家介绍了关于微信小程序如何实现登录的相关资料,需要的朋友可以参考下
    2022-07-07
  • js实现的在本地预览图片功能示例

    js实现的在本地预览图片功能示例

    这篇文章主要介绍了js实现的在本地预览图片功能,结合实例形式分析了JavaScript兼容移动web与IE浏览器的图片预览功能相关实现技巧,需要的朋友可以参考下
    2019-11-11
  • 解决html按钮切换绑定不同函数后点击时执行多次函数问题

    解决html按钮切换绑定不同函数后点击时执行多次函数问题

    这篇文章主要介绍了如何解决html按钮切换绑定不同函数后点击时执行多次函数问题,需要的朋友可以参考下
    2014-05-05

最新评论