js实现文件夹目录选择文件

2026-01-30 17:02:28JavaScript

使用 `<input type="file">` 实现文件选择

通过HTML的<input type="file" webkitdirectory directory multiple>属性可以触发文件夹选择对话框。用户选择的文件夹及其子目录中的文件会被包含在files属性中。

js实现文件夹目录选择文件

<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对象可获取用户选择的文件信息（名称、路径、大小等）。需注意浏览器安全限制导致路径可能为虚拟路径。

js实现文件夹目录选择文件

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); // 递归处理子目录
      }
    });
  });
}