一、开场白
嘿，小伙伴们！你知道吗？在浏览器里不仅能看网页，还能“偷偷”打开你的文件夹，读取里面的文件内容！今天，我们要解锁一个神奇技能：如何用前端代码玩转文件夹里的小秘密～
二、装备清单
想要成功解锁这个技能，你需要这些小工具：
- 🛠️ HTML5 的
<input>标签 - 🧠 JavaScript 的
File和FileReader - 🏋️♂️ File System Access API（现代浏览器黑科技）
- 🎧 事件监听器（Event Listeners）
准备好了吗？咱们开始吧！
三、用 webkitdirectory 翻箱倒柜
3.1 📂 选择文件夹
打开你的 HTML 工具箱，写下这行神秘代码：
<input type="file" id="folderInput" webkitdirectory multiple>
<div id="output"></div>
type="file"：文件选择器启动！webkitdirectory：能选整个文件夹！multiple：一次性带走多个文件！
3.2 🕵️♂️ 读取文件内容（包括子目录）
document.getElementById('folderInput').addEventListener('change', () => {
const folderInput = document.getElementById('folderInput');
const output = document.getElementById('output');
output.innerHTML = '';
if (folderInput.files.length > 0) {
Array.from(folderInput.files).forEach(file => {
const reader = new FileReader();
reader.onload = (e) => {
output.innerHTML += `<p><strong>${file.webkitRelativePath}:</strong> ${e.target.result}</p>`;
};
reader.readAsText(file);
});
} else {
output.innerHTML = '<p>🫣 你还没选文件夹呢！</p>';
}
});
3.3 📝 小提示
file.webkitRelativePath：能显示文件夹里的路径！FileReader.readAsText：轻松读取文件内容！onload：文件读取成功后触发！
四、用 File System Access API 深入探索
4.1 🗂️ 打开文件夹
想要更高阶的操作？咱们用上 File System Access API：
<button onclick="readFolder()">🪄 选择文件夹并读取内容</button>
<div id="outputFS"></div>
4.2 🔍 遍历文件夹和子目录
async function readFolder() {
const output = document.getElementById('outputFS');
output.innerHTML = '';
try {
const directoryHandle = await window.showDirectoryPicker();
await readDirectory(directoryHandle, '');
} catch (err) {
console.error('⚠️ 访问文件夹失败:', err);
}
}
async function readDirectory(directoryHandle, path) {
for await (const entry of directoryHandle.values()) {
const fullPath = path ? `${path}/${entry.name}` : entry.name;
if (entry.kind === 'file') {
const file = await entry.getFile();
const content = await file.text();
outputFS.innerHTML += `<p><strong>${fullPath}:</strong> ${content}</p>`;
} else if (entry.kind === 'directory') {
await readDirectory(entry, fullPath);
}
}
}
4.3 📝 小提示
showDirectoryPicker：弹出文件夹选择窗口！getFile：获取每个文件的内容！readDirectory：递归读取子目录里的文件！
五、友情提醒
-
🔗 兼容性：
webkitdirectory：仅在 Chrome 和 Edge 中表现良好。File System Access API：现代浏览器（Chrome 86+、Edge 86+）支持。
-
🛡️ 安全性：浏览器不会让你“肆无忌惮”地访问用户文件。
-
🐢 性能：文件太多的话，可能会卡到爆！
六、实战场景
- 📸 批量上传图片：一键选中文件夹，上传所有图片。
- 📊 日志分析工具：批量读取日志文件。
- 📁 文档管理器：高效管理多个文档。
七、尾声
🎉 恭喜你，成功掌握了文件夹读取的两种姿势：
webkitdirectory的轻便快捷File System Access API的高阶递归
📚 小挑战：把文件内容展示得更美观，甚至加个进度条！
