js实现文件目录选择
使用 <input type="file"> 实现文件选择
通过 HTML 原生文件输入框实现单个或多个文件选择，支持目录选择（需添加 webkitdirectory 属性）：
<input type="file" id="fileInput" webkitdirectory multiple />
<script>
document.getElementById('fileInput').addEventListener('change', (event) => {
const files = event.target.files;
console.log('Selected files:', files);
});
</script>webkitdirectory: 允许选择目录（仅限 Chrome/Edge 等基于 Chromium 的浏览器）。multiple: 允许多选文件或目录内容。
使用 showDirectoryPicker() API（现代浏览器）
通过 File System Access API 实现更灵活的目录选择（需用户主动触发，如点击事件）：
async function pickDirectory() {
try {
const dirHandle = await window.showDirectoryPicker();
const files = [];
for await (const entry of dirHandle.values()) {
if (entry.kind === 'file') {
files.push(entry.name);
}
}
console.log('Directory contents:', files);
} catch (err) {
console.error('User cancelled or API not supported:', err);
}
}- 仅支持 HTTPS 或本地开发环境。
- 返回的是文件句柄（
FileSystemHandle），需进一步处理获取文件内容。
通过拖放（Drag & Drop）实现
监听拖放事件获取目录中的文件列表：
<div id="dropZone">拖放目录或文件到此处</div>
<script>
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const items = e.dataTransfer.items;
const files = [];
for (let i = 0; i < items.length; i++) {
if (items[i].webkitGetAsEntry()?.isDirectory) {
console.log('Directory dropped (limited access)');
} else {
files.push(items[i].getAsFile());
}
}
console.log('Dropped files:', files);
});
dropZone.addEventListener('dragover', (e) => e.preventDefault());
</script>- 拖放目录时可能无法直接访问内部文件（浏览器限制）。
兼容性说明
webkitdirectory和showDirectoryPicker()在 Firefox 中不支持。- 生产环境建议检测 API 支持情况并提供备选方案（如传统文件上传）。
完整示例可参考 MDN 文档。
