JavaScript实现文件夹选择功能，如何取消选择后的确认提示弹窗？

文件夹选择确认框相关说明 #

这个选择文件夹后弹出的确认提示是浏览器原生的安全策略限制，所有使用webkitdirectory属性的<input type="file">标签都会触发该提示，目的是明确告知用户当前网站即将获得文件夹内所有文件的访问权限，避免用户误授权导致隐私泄露，纯前端环境下没有任何方法可以直接绕过这个限制，也不存在可以实现该需求的纯第三方JS库。

针对不同使用场景可以采用对应的方案处理：

• 普通Web页面场景
  无法关闭该提示，只能在交互层面优化体验：可以在选择按钮旁添加提示文案，提前告知用户选择文件夹后会弹出浏览器安全确认弹窗，点击确认即可完成选择，降低用户操作疑惑。另外普通Web页面受浏览器沙箱限制，即使确认授权后也只能获取文件的相对路径，无法拿到本地文件夹的真实绝对路径，有绝对路径获取需求的只能通过桌面混合开发方案实现。
• Electron/NW.js等桌面混合开发场景
  可以直接调用框架提供的原生系统文件夹选择API，完全绕过浏览器Web API的限制，不会触发该确认提示。以下是Electron环境的示例代码：

  // 仅可在Electron主进程中调用
  const { dialog } = require('electron')
  async function selectFolder() {
    const res = await dialog.showOpenDialog({
      properties: ['openDirectory']
    })
    if(!res.canceled) {
      // 拿到选中的文件夹本地绝对路径
      const folderPath = res.filePaths[0]
    }
  }
  

• 浏览器扩展程序场景
  可以申请对应浏览器的文件访问权限，调用扩展专属的文件选择接口，也可以绕过该安全提示。

内容的提问来源于stack exchange，提问作者Umang Patel