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打开本地文件夹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用axios实现上传图片进度条功能

    使用axios实现上传图片进度条功能

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。这篇文章主要介绍了使用axios实现上传图片进度条,需要的朋友可以参考下
    2017-12-12
  • 纯js实现轮播图效果

    纯js实现轮播图效果

    这篇文章主要为大家详细介绍了纯js实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • cocos2dx骨骼动画Armature源码剖析(二)

    cocos2dx骨骼动画Armature源码剖析(二)

    本篇主要给大家介绍cocos2dx骨骼动画Armature源码剖析之flash中数据与xml中数据关系,需要的朋友一起来学习吧
    2015-09-09
  • 深入理解javascript中concat方法

    深入理解javascript中concat方法

    本文主要介绍了javascript中concat方法,主要分为2小节内容:1.concat方法的基础介绍;2.从实例中感受concat方法。需要的朋友一起来看下吧
    2016-12-12
  • BootStrap前端框架使用方法详解

    BootStrap前端框架使用方法详解

    这篇文章主要介绍了BootStrap前端框架使用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • js验证整数加保留小数点的简单实例

    js验证整数加保留小数点的简单实例

    这篇文章主要介绍了js验证整数加保留小数点的简单实例,有需要的朋友可以参考一下
    2013-12-12
  • javascript循环链表之约瑟夫环的实现方法

    javascript循环链表之约瑟夫环的实现方法

    这是一道比较经典的循环链表问题,在华为上机笔试中也出现过。 约瑟夫环是一个数学的应用问题,下面这篇文章主要就给大家介绍了javascript循环链表之约瑟夫环的实现方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • 浅析JavaScript中作用域和作用域链

    浅析JavaScript中作用域和作用域链

    本文主要介绍了JavaScript中作用域和作用域链解析,条理分明,方便理解,这里推荐给小伙伴们,有需要的朋友可以参考下
    2016-12-12
  • html5+CSS 实现禁止IOS长按复制粘贴功能

    html5+CSS 实现禁止IOS长按复制粘贴功能

    因为在移动端APP需要实现长按执行别的事件,但是在iOS系统有默认的长按选择复制粘贴。禁止在网上找了很多资料,下面小编给大家分享解决方案,一起看看吧
    2016-12-12
  • JS多个异步请求 按顺序执行next实现解析

    JS多个异步请求 按顺序执行next实现解析

    这篇文章主要介绍了js多个异步请求 按顺序执行next实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09

最新评论