<input type="file" webkitdirectory directory multiple/>移动端选目录功能失效求助

安卓版Chrome暂未原生支持<input type="file">的directory/webkitdirectory属性，这是内核层面的兼容限制，和代码实现无关，安卓系统自带的文件选择器也没有提供目录选取的标准化回调接口，因此该属性仅桌面端可用。

可行解决方法 #

• 方案1：使用PWA专属的File System Access API（推荐，安卓Chrome 86及以上版本全支持）
  该API是W3C标准化的本地文件系统操作接口，支持目录选取、读写操作，完全适配移动端Chrome环境，示例代码如下：

  // 目录选取逻辑，需要绑定到用户主动触发的事件（比如点击按钮）
  async function loadAudioFromDir() {
    const audioFiles = []
    try {
      // 唤起目录选择器
      const dirHandle = await window.showDirectoryPicker()
      // 遍历目录下所有文件
      for await (const entry of dirHandle.values()) {
        // 只筛选音频文件，可根据需求调整后缀判断
        if (entry.kind === 'file' && entry.type.startsWith('audio/')) {
          const file = await entry.getFile()
          audioFiles.push(file)
        }
      }
      // 这里拿到的audioFiles就是目标文件夹下的所有音频文件数组
      console.log(audioFiles)
    } catch (err) {
      // 用户取消选择的异常处理，可以忽略
      if (err.name !== 'AbortError') {
        console.error('目录读取失败', err)
      }
    }
  }
  

  注意：该API仅在HTTPS/localhost环境下可用，调用必须绑定到用户主动触发的交互事件（比如click、tap），不能自动调用。

• 方案2：降级到多文件批量选择（兼容所有移动端浏览器）
  如果需要覆盖更低版本的安卓浏览器，可放弃目录选择逻辑，修改input标签仅保留多文件选择能力，引导用户手动全选目标文件夹内的音频文件：

  <input type="file" multiple accept="audio/*" />
  

  该方案兼容性100%，仅用户操作步骤多一步，适合面向普通用户的公开PWA场景。

• 方案3：调试/内部使用场景手动开启开关
  如果是开发调试或者仅内部人员使用的PWA，可以让用户在安卓Chrome地址栏输入chrome://flags，搜索并开启#input-type-file-directory和#file-system-access两个开关，重启浏览器后原生input的目录选择能力即可恢复，该方案不适合普通用户使用。

兼容优化建议 #

可以在代码中先做特性检测，优先调用File System Access API，不支持的环境自动降级到多文件选择方案，保证不同环境下的可用性。

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