js实现文件夹目录选择文件
使用 <input type="file"> 实现文件选择
通过HTML的<input type="file" webkitdirectory directory multiple>属性可以触发文件夹选择对话框。用户选择的文件夹及其子目录中的文件会被包含在files属性中。
<input id="folderInput" type="file" webkitdirectory directory multiple>
<script>
document.getElementById('folderInput').addEventListener('change', (event) => {
const files = event.target.files;
console.log(files); // 文件列表（FileList对象）
});
</script>遍历文件列表并处理
通过FileList对象可获取用户选择的文件信息（名称、路径、大小等）。需注意浏览器安全限制导致路径可能为虚拟路径。
const fileList = event.target.files;
for (let i = 0; i < fileList.length; i++) {
const file = fileList[i];
console.log(`文件名: ${file.name}, 大小: ${file.size} bytes`);
}使用DataTransfer API实现拖放选择
通过拖放文件夹到指定区域也能获取文件列表，需监听drop事件并检查DataTransferItem的webkitGetAsEntry方法。
const dropArea = document.getElementById('dropArea');
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
const items = e.dataTransfer.items;
for (let i = 0; i < items.length; i++) {
const entry = items[i].webkitGetAsEntry();
if (entry.isDirectory) {
readDirectory(entry);
}
}
});递归读取目录内容
若需深度遍历子目录，可通过FileSystemDirectoryEntry的createReader方法递归读取。
function readDirectory(directoryEntry) {
const reader = directoryEntry.createReader();
reader.readEntries((entries) => {
entries.forEach(entry => {
if (entry.isFile) {
entry.file(file => console.log(file.name));
} else if (entry.isDirectory) {
readDirectory(entry); // 递归处理子目录
}
});
});
}浏览器兼容性说明
webkitdirectory属性仅在Chrome、Edge、Opera等基于Chromium的浏览器中支持。- Firefox部分版本需启用
dom.webkit.enabled配置。 - Safari对目录选择的支持有限。
安全限制与替代方案
- 浏览器不会暴露真实文件路径，仅提供文件名和内容。
- 如需更复杂功能（如持久化访问），可考虑Electron或Chrome扩展API（如
chrome.fileSystem）。
