JavaScript 实现访问本地文件夹
首先分享一个 GitHub 的小知识：在 GitHub 域名后加上 1s，即可打开一个 VSCode 窗口来阅读代码。
接下来，介绍如何用 JavaScript 实现访问本地文件夹的功能。考虑到用户隐私，这个功能在之前是不可行的，但新的 API 使之成为可能。下面是一个简单的功能实现示例。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>读取本地文件内容</title>
</head>
<body>
<button id="btn">选择文件夹</button>
</body>
</html>
<script>
// https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker
const btnDom = document.getElementById("btn");
btnDom.onclick = async () => {
try {
const directory = await window.showDirectoryPicker();
const root = await processDirectory(directory);
await renderAllFile(root);
} catch (error) {
console.error(error);
}
};
const fileKind = 'file';
const processDirectory = async (directory) => {
if (directory.kind === fileKind) {
return directory;
}
directory.children = [];
const iter = directory.entries();
for await (const item of iter) {
directory.children.push(await processDirectory(item[1]));
}
return directory;
};
const renderAllFile = async (root) => {
const rootType = Array.isArray(root);
const rootFiles = rootType ? root : [root];
for (let i = 0; i < rootFiles.length; i++) {
const rootItem = rootFiles[i];
if (rootItem.kind === fileKind) {
await readerFile(rootItem);
}
if ((rootItem?.children || []).length) {
await renderAllFile(rootItem.children);
}
}
};
const readerFile = async (fileHandle) => {
const file = await fileHandle.getFile();
const render = new FileReader();
render.onload = (e) => {
const fileText = e.target.result;
console.log('读取的文件名', file.name);
console.log('读取的文件内容', fileText);
};
render.readAsText(file, 'utf-8');
};
</script>
说明
- 该代码使用
showDirectoryPickerAPI 获取用户选择的文件夹。 processDirectory函数递归处理目录，收集文件信息。renderAllFile函数读取所有文件并打印文件名和内容。