js实现选择目录
实现目录选择功能
在JavaScript中实现目录选择功能通常涉及使用HTML的<input type="file">元素，并结合webkitdirectory属性或Directory API。以下是几种实现方法：
使用webkitdirectory属性（Chrome/Edge）
<input type="file" id="directoryInput" webkitdirectory directory multiple>
<script>
document.getElementById('directoryInput').addEventListener('change', function(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
console.log(files[i].webkitRelativePath);
}
});
</script>此方法仅在基于Chromium的浏览器中有效，会返回文件及其相对路径信息。
使用showDirectoryPicker() API（现代浏览器）
async function selectDirectory() {
try {
const dirHandle = await window.showDirectoryPicker();
const files = [];
for await (const entry of dirHandle.values()) {
if (entry.kind === 'file') {
files.push(await entry.getFile());
}
}
console.log(files);
} catch (error) {
console.error('Error selecting directory:', error);
}
}此API需要安全上下文（HTTPS或localhost），返回文件系统句柄对象，允许更精细的目录操作。
使用传统文件输入+服务器处理
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="files" multiple directory webkitdirectory>
<button type="submit">上传</button>
</form>服务器端需要处理多文件上传并重建目录结构。
注意事项
- 浏览器兼容性各不相同，
webkitdirectory主要支持Chrome/Edge showDirectoryPicker()是较新的API，支持Chrome 86+、Edge 86+、Firefox 111+- 用户隐私保护机制可能限制某些目录访问
- 移动端浏览器支持有限
实际应用中通常需要结合多种方法并提供回退方案，同时考虑用户体验和隐私保护要求。
