访问文件夹并读取文件内容
将展示如何使用 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 事件处理程序，可以在文件读取完成后获取文件内容，并将其输出到控制台和段落元素中。
通过这段代码，可以实现打开文件夹、访问文件夹内容，并读取文件的内容。
