JavaScript 浏览本地文件夹

1. JavaScript 浏览本地文件夹

 
    button.onclick = async function () {// 给按钮绑定事件
      try {
        const handler = await showDirectoryPicker(
          // {
          // mode: 'readwrite', //指定读写模式：读/读写
          // startIn: 'documents' // 指定默认打开的文件夹
          // }
        )
        const root = await processHandler(handler)
		
		// 遍历文件，读取文件，仅供参考，因为不是所有文件都是文本文件都可以readAsText()
        for await (const iterator of root.children) {
          if (iterator.kind !== 'file') continue
          const file = await iterator.getFile()
          const reader = new FileReader()
          reader.onload = e => {
            console.log(e.target.result)
          }
          reader.readAsText(file)
          console.log(file)
        }
 
      } catch (e) {
        if (e.toString().includes('AbortError')) {
          alert('用户关闭了对话框或者取消了授权')
        } else {
          alert('e')
        }
      }
    }
	
	
    /**
     * 递归遍历文件夹
     */
    async function processHandler(handler) {
      if (handler.kind !== 'file') { // 不是文件，就进行递归遍历，是文件，就直接返回
        const entries = await handler.entries()// 获取文件夹中所有的内容
 
        handler.children = []
        for await (const iterator of entries) {
          const childrenHandler = await processHandler(iterator[1])
          handler.children.push(childrenHandler)
        }
      }
      return handler
    }

2. Reference

1. Window：showDirectoryPicker() 方法

注意浏览器兼容性：showDirectoryPicker 浏览器兼容性

2. FileReader

3. Notice

1. 文件操作全都是异步，如果结果有问题，请务必检查是否添加await、async等关键字
2. 本文内容是 学习B站 【渡一教育】 整理得来

__EOF__

本文作者：echo_lovely
本文链接：https://www.cnblogs.com/echo-lovely/p/17903392.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！