【JS文件】访问文件夹及文件内容

宇宙☆空间站

于 2025-01-21 16:53:30 发布

阅读量361

点赞数 5

分类专栏： JavaScript 文章标签： javascript 前端 es6

本文链接：https://blog.youkuaiyun.com/weixin_42826790/article/details/145286562

版权

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>打开文件夹</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async () => {
        const handle = await showDirectoryPicker();//打开弹窗，获取选择文件夹句柄
        await processHandle(handle);

        const fileHandle = await handle.children[0];//文件夹里的第一个文件
        const file = await fileHandle.getFile();
        const reader = new FileReader();
        reader.onload = (e) => {
          console.log(e.target.result);
        };
        reader.readAsText(file);
        console.log(handle);
      };

      async function processHandle(handle) {//组成文件夹树
        if (handle.kind === "file") return;
        const entries = await handle.values();
        handle.children = [];
        for await (const subHandle of entries) {
          handle.children.push(subHandle);
          await processHandle(subHandle);
        }
      }
    </script>
  </body>
</html>