js实现选择目录
使用 <input type="file"> 实现目录选择
通过设置 webkitdirectory 属性，允许用户选择目录而非单个文件。适用于基于 Chromium 的浏览器（如 Chrome、Edge）。
const input = document.createElement('input');
input.type = 'file';
input.webkitdirectory = true;
input.addEventListener('change', (event) => {
const files = event.target.files;
console.log('所选目录中的文件列表:', files);
});
document.body.appendChild(input);使用 File System Access API
现代浏览器支持的 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(entry.name);
}
}
console.log('目录内容:', files);
} catch (err) {
console.error('用户取消选择或浏览器不支持:', err);
}
}Node.js 环境下的目录选择
通过 dialog 模块（Electron 或 Node.js 后端）实现：
const { dialog } = require('electron').remote; // Electron 示例
const selectedPaths = dialog.showOpenDialog({
properties: ['openDirectory']
});
console.log('选择的目录路径:', selectedPaths);注意事项
- 浏览器兼容性：
webkitdirectory仅部分浏览器支持，File System Access API 需 HTTPS 环境。 - 权限限制：浏览器无法直接访问本地文件系统，需用户主动触发选择操作。
- Electron 扩展：在桌面应用中可通过
ipcRenderer与主进程通信实现更复杂的文件操作。
