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的静态属性和原型属性

    浅谈Javascript的静态属性和原型属性

    本文给大家介绍的是javascript中的静态属性和原型属性,并附上示例分析,十分的实用,有需要的小伙伴可以参考下。
    2015-05-05
  • JavaScript中防抖和节流的实战应用记录

    JavaScript中防抖和节流的实战应用记录

    防抖与节流都是用来限制用户频发触发事件的机制,下面这篇文章主要给大家介绍了关于JavaScript中防抖和节流的实战应用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 基于Bootstrap的标签页组件及bootstrap-tab使用说明

    基于Bootstrap的标签页组件及bootstrap-tab使用说明

    这篇文章主要介绍了基于Bootstrap的标签页组件及bootstrap-tab使用说明,需要的朋友可以参考下
    2017-07-07
  • js bind 函数 使用闭包保存执行上下文

    js bind 函数 使用闭包保存执行上下文

    在javascript中,函数总是在一个特殊的上下文执行(称为执行上下文),如果你将一个对象的函数赋值给另外一个变量的话,这个函数的执行上下文就变为这个变量的上下文了。下面的一个例子能很好的说明这个问题
    2011-12-12
  • 使用JS实现图片轮播的实例(前后首尾相接)

    使用JS实现图片轮播的实例(前后首尾相接)

    下面小编就为大家带来一篇使用JS实现图片轮播的实例(前后首尾相接)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js单线程的本质 Event Loop解析

    js单线程的本质 Event Loop解析

    这篇文章主要介绍了js单线程的本质 Event Loop解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • javascript实现图片轮换动作方法

    javascript实现图片轮换动作方法

    这篇文章主要介绍了javascript实现图片轮换动作方法,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Javascript中对象继承的实现小例

    Javascript中对象继承的实现小例

    这篇文章主要介绍了Javascript中对象继承的实现,需要的朋友可以参考下
    2014-05-05
  • js 增强型title信息提示效果

    js 增强型title信息提示效果

    js操作div仿title提示信息效果,增强型title信息提示,效果不错。
    2010-06-06
  • javascript自定义右键菜单插件

    javascript自定义右键菜单插件

    这篇文章主要为大家详细介绍了javascript自定义右键菜单插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12

最新评论