js实现文件目录选择
使用 <input type="file"> 实现文件选择
通过 HTML 的 input 元素配合 webkitdirectory 属性（非标准但主流浏览器支持）实现目录选择：
<input type="file" id="dirPicker" webkitdirectory directory multiple />
<script>
document.getElementById('dirPicker').addEventListener('change', (event) => {
const files = event.target.files;
console.log(files); // 文件列表（包含目录结构信息）
});
</script>注意：
webkitdirectory和directory属性需同时声明以兼容不同浏览器。multiple允许选择多个文件（实际会包含目录下所有文件）。
使用 File System Access API（现代浏览器）
Chrome 86+ 和 Edge 支持更强大的文件系统访问 API，允许直接获取目录句柄：
async function pickDirectory() {
try {
const dirHandle = await window.showDirectoryPicker();
const files = [];
for await (const entry of dirHandle.values()) {
files.push(entry);
}
console.log(files); // 包含文件/子目录的 FileSystemHandle 对象
} catch (err) {
console.error("用户取消选择或API不支持:", err);
}
}特性：
- 返回
FileSystemDirectoryHandle对象，可递归遍历目录。 - 需在安全上下文（HTTPS 或 localhost）中运行。
兼容性处理方案
若需兼容旧版浏览器，可降级到普通文件选择：
const isDirSupported = 'webkitdirectory' in HTMLInputElement.prototype;
const input = document.createElement('input');
input.type = 'file';
if (isDirSupported) {
input.webkitdirectory = true;
} else {
console.warn("浏览器不支持目录选择");
}后端配合处理
选择目录后，通常需通过 FormData 上传文件列表：
const formData = new FormData();
Array.from(files).forEach(file => {
formData.append('uploads[]', file, file.webkitRelativePath);
});
fetch('/upload', { method: 'POST', body: formData });关键点：
file.webkitRelativePath包含文件在目录中的相对路径（如folder/sub/file.txt）。
安全限制
- 浏览器无法直接获取目录的本地绝对路径。
- 用户必须主动触发文件选择（如点击事件），禁止自动弹出选择框。
