访问文件夹并读取文件内容

将展示如何使用 JavaScript 中的 showDirectoryPicker() 方法来访问文件夹，并读取文件的内容。

HTML 结构

首先，需要一个按钮来触发打开文件夹的操作：

<button>打开文件夹</button>

还需要一个段落元素用于显示文件的内容：

<p></p>

JS 代码

接下来，使用 JavaScript 来处理按钮的点击事件，并访问文件夹。代码如下所示：

const btn = document.querySelector("button");
const p = document.querySelector("p");

btn.addEventListener("click", async () => {
  try {
    const handler = await showDirectoryPicker();
    const root = await processHandler(handler);
    console.log(root); // 输出索引目录下的文件和文件夹

    // 输出文件内容，标准的文件上传时样子
    const file = await root.children[3].children[0].getFile(); // 需要找到这个文件夹下的文件
    const reader = new FileReader();

    reader.onload = (e) => {
      console.log(e.target.result);
      p.innerHTML = e.target.result;
    };

    // 当做存文本读取
    reader.readAsText(file, "utf-8");
  } catch (error) {
    console.log(error.message);
  }
});

async function processHandler(handler) {
  if (handler.kind === "file") return handler;

  handler.children = [];
  // 获取文件夹所有内容
  const iterator = await handler.entries();

  for await (const [name, subHandler] of iterator) {
    const subHandle = await processHandler(subHandler);
    // 处理文件夹中内容
    handler.children.push(subHandle);
  }

  return handler;
}

在上述代码中，通过 document.querySelector("button") 获取到按钮元素，并添加了一个点击事件的监听器。

当按钮被点击时，使用 showDirectoryPicker() 方法来打开文件夹选择器。该方法返回一个处理器（handler），用于处理所选文件夹的操作。

然后，调用 processHandler() 函数来处理文件夹的内容。该函数首先判断处理器的类型，如果是文件（kind === "file"），则直接返回该处理器。

如果是文件夹，则初始化一个空数组 handler.children，用于存储文件夹下的子文件和子文件夹。

接下来，使用 await handler.entries() 获取文件夹下的所有内容，并通过 for await...of 循环遍历每个文件或文件夹。对于每个子文件或子文件夹，递归调用 processHandler() 函数，并将返回的处理器存储在 handler.children 数组中。

最后，返回处理器 handler。

在读取文件内容的部分，使用了 getFile() 方法来获取文件对象，并创建了一个 FileReader 对象来读取文件的内容。通过设置 reader.onload 事件处理程序，可以在文件读取完成后获取文件内容，并将其输出到控制台和段落元素中。

通过这段代码，可以实现打开文件夹、访问文件夹内容，并读取文件的内容。