js实现文件夹选择器

2026-04-05 03:46:49JavaScript

使用 `<input type="file">` 实现文件夹选择

HTML5 提供了 webkitdirectory 属性，允许用户选择整个文件夹（仅限基于 Chromium 的浏览器）：

js实现文件夹选择器

<input type="file" id="folderInput" webkitdirectory directory multiple>

JavaScript 获取选择的文件夹内容：

js实现文件夹选择器

document.getElementById('folderInput').addEventListener('change', function(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        console.log(files[i].webkitRelativePath); // 显示文件相对路径
    }
});

使用 File System Access API（现代浏览器）

更先进的文件夹访问方式，需要用户主动触发：

async function pickFolder() {
    try {
        const dirHandle = await window.showDirectoryPicker();
        for await (const entry of dirHandle.values()) {
            console.log(entry.kind, entry.name);
        }
    } catch (err) {
        console.error('用户取消选择', err);
    }
}

处理文件列表的递归遍历

对于选中的文件夹，可以递归处理子目录：

async function processDirectory(directoryHandle) {
    const files = [];
    for await (const entry of directoryHandle.values()) {
        if (entry.kind === 'file') {
            files.push(await entry.getFile());
        } else if (entry.kind === 'directory') {
            files.push(...await processDirectory(entry));
        }
    }
    return files;
}

兼容性注意事项

webkitdirectory 仅在 Chrome/Edge 等浏览器支持
File System Access API 需要 HTTPS 环境或 localhost
旧版浏览器需使用传统文件选择或多选模式

完整示例代码

<button id="pickFolder">选择文件夹</button>
<script>
document.getElementById('pickFolder').addEventListener('click', async () => {
    const dirHandle = await window.showDirectoryPicker();
    const fileList = await processDirectory(dirHandle);
    console.log('获取文件总数:', fileList.length);
});
</script>