js实现文件夹
实现文件夹操作的 JavaScript 方法
在浏览器端的 JavaScript 中，由于安全限制，无法直接操作本地文件系统。但可以通过以下方式模拟或间接实现文件夹操作：
使用 <input type="file"> 选择文件夹
HTML5 提供了 webkitdirectory 属性允许用户选择整个文件夹：
<input type="file" id="folderInput" webkitdirectory>
<script>
document.getElementById('folderInput').addEventListener('change', function(e) {
const files = e.target.files;
console.log(files); // 包含文件夹内所有文件
});
</script>Node.js 中的文件夹操作
在 Node.js 环境下可以使用 fs 模块进行完整文件夹操作：
const fs = require('fs');
const path = require('path');
// 创建文件夹
fs.mkdirSync('newFolder');
// 读取文件夹内容
fs.readdirSync('targetFolder').forEach(file => {
console.log(file);
});
// 递归删除文件夹
function deleteFolderRecursive(path) {
if (fs.existsSync(path)) {
fs.readdirSync(path).forEach(file => {
const curPath = path + '/' + file;
if (fs.lstatSync(curPath).isDirectory()) {
deleteFolderRecursive(curPath);
} else {
fs.unlinkSync(curPath);
}
});
fs.rmdirSync(path);
}
}浏览器端的虚拟文件夹
可以使用第三方库如 browser-fs-access 提供更友好的文件夹访问：
import { fileOpen, directoryOpen } from 'browser-fs-access';
// 打开文件夹
const dirHandle = await directoryOpen({
recursive: true // 允许递归访问子目录
});使用 File System Access API
现代浏览器支持 File System Access API 进行更高级操作：
// 请求文件夹访问权限
const dirHandle = await window.showDirectoryPicker();
// 遍历文件夹内容
for await (const entry of dirHandle.values()) {
console.log(entry.kind, entry.name);
}注意事项
- 浏览器环境中的文件夹访问需要用户明确授权
- Node.js 操作需要文件系统权限
- 生产环境应考虑错误处理和权限检查
- 不同浏览器对文件夹访问API的支持程度不同
