不使用webkitdirectory属性实现系统目录选择功能是否可行？

目前纯前端场景下没有完全脱离webkitdirectory且全版本浏览器兼容的方案，但可以通过以下两种方式满足你的需求：

方案1：动态注入input元素，规避Svelte编译报错 #

Svelte抛出异常是因为对模板内静态声明的非标准属性做了校验，你可以不在Svelte模板中写input标签，改为运行时动态创建、动态添加webkitdirectory属性，就能绕开编译检查，这也是Dropbox等站点的实现逻辑：

function triggerDirSelect() {
  const fileInput = document.createElement('input')
  fileInput.type = 'file'
  // 运行时动态赋值非标准属性，不会触发Svelte编译校验
  fileInput.webkitdirectory = true
  fileInput.multiple = true
  fileInput.onchange = (e) => {
    // 获取选中目录下的所有文件，webkitRelativePath属性标识文件的目录层级
    const selectedFiles = Array.from(e.target.files)
    // 后续业务逻辑
  }
  fileInput.click()
}

方案2：使用标准File System Access API，完全不依赖webkitdirectory #

该API是W3C正式的标准提案，目前Chrome、Edge、Safari 15.2+、Firefox 111+均已支持，完全不需要使用非标准的webkitdirectory属性，也不会触发Svelte的异常提示：

async function triggerDirSelect() {
  try {
    // 直接唤起系统目录选择器
    const dirHandle = await window.showDirectoryPicker()
    // 遍历目录下的所有文件和子目录
    for await (const entry of dirHandle.values()) {
      if (entry.kind === 'file') {
        const file = await entry.getFile()
        // 处理文件逻辑
      } else if (entry.kind === 'directory') {
        // 处理子目录逻辑
      }
    }
  } catch (err) {
    // 过滤用户主动取消选择的报错
    if (err.name !== 'AbortError') {
      console.error('目录选择失败：', err)
    }
  }
}

如果需要兼容老旧浏览器，可以做逻辑降级：优先调用showDirectoryPicker，浏览器不支持该API时再走动态创建input的方案，两套逻辑配合可以覆盖绝大多数用户场景。

如果以上两种方案都不接受，目前没有其他纯前端实现方案，只能引导用户将目录打包为压缩包上传后再做前端解压处理，该方案用户体验较差，仅作为备选。

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