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操作本地目录资讯可检索本站往期文章或继续阅读后续内容,期待大家持续支持本站!

作者最新文章