如何使用JavaScript点击按钮打开本地文件夹实现文件选择功能？

无法通过设置window.open的url参数实现打开本地文件夹选择文件的需求。
浏览器出于安全沙箱限制，禁止前端JavaScript直接调用本地文件系统路径，直接传入file://开头的本地路径也会被浏览器的安全策略拦截，无法正常唤起文件夹窗口。

如果要实现文件/文件夹选择功能，正确方案是使用HTML原生的<input type="file">控件，示例代码如下：

完整实现代码 #

HTML部分

<!-- 隐藏的文件选择控件，添加webkitdirectory属性可选择整个文件夹 -->
<input type="file" id="filePicker" style="display: none;" webkitdirectory>
<button id="OpenFolder">OpenFolder</button>

JavaScript部分

$("#OpenFolder").click(function () {
  // 触发隐藏的文件选择控件，唤起系统原生文件选择窗口
  $("#filePicker").click();
})

// 监听文件选择结果
$("#filePicker").on("change", function(e) {
  // 获取用户选择的文件列表
  const selectedFileList = e.target.files;
  // 此处编写选择文件后的业务逻辑
  console.log(selectedFileList);
})

补充说明 #

• 若仅需要选择单个/多个文件，不需要选整个文件夹，删除webkitdirectory属性即可，需要多选可添加multiple属性
• 该方案兼容所有主流浏览器，符合浏览器安全规范

内容的提问来源于stack exchange，提问作者olivier dadoun