js实现文件夹选择器

2026-01-31 11:39:25JavaScript

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

在 HTML 中，可以通过 <input type="file" webkitdirectory directory multiple> 属性实现文件夹选择功能。该属性允许用户选择整个文件夹及其内容。

<input type="file" id="folderInput" webkitdirectory directory multiple>
<script>
  document.getElementById('folderInput').addEventListener('change', function(event) {
    const files = event.target.files;
    console.log(files); // 文件列表
  });
</script>

webkitdirectory 和 directory 属性确保浏览器允许选择文件夹，multiple 允许选择多个文件。

监听文件夹选择事件

通过监听 change 事件，可以获取用户选择的文件夹中的文件列表。文件列表是一个 FileList 对象，可以通过遍历访问每个文件的信息。

js实现文件夹选择器

document.getElementById('folderInput').addEventListener('change', function(event) {
  const files = event.target.files;
  for (let i = 0; i < files.length; i++) {
    console.log(files[i].name); // 文件名
    console.log(files[i].webkitRelativePath); // 相对路径
  }
});

webkitRelativePath 属性提供了文件在文件夹中的相对路径，有助于重建文件夹结构。

处理选中的文件

获取文件列表后，可以进一步处理这些文件，例如上传到服务器或在前端进行预览。

js实现文件夹选择器

document.getElementById('folderInput').addEventListener('change', function(event) {
  const files = event.target.files;
  Array.from(files).forEach(file => {
    const reader = new FileReader();
    reader.onload = function(e) {
      console.log(e.target.result); // 文件内容
    };
    reader.readAsText(file); // 以文本形式读取文件
  });
});

FileReader 可以读取文件内容，支持文本、二进制或 DataURL 格式。

兼容性注意事项

webkitdirectory 属性主要在基于 Chromium 的浏览器（如 Chrome、Edge）中支持，Firefox 也支持，但 Safari 和某些旧版浏览器可能不支持。可以通过检查属性是否存在来提供备用方案。

if ('webkitdirectory' in document.createElement('input')) {
  // 支持文件夹选择
} else {
  // 不支持，显示提示或备用方案
  console.log('浏览器不支持文件夹选择功能');
}

使用第三方库

如果需要更复杂的功能或更好的兼容性，可以考虑使用第三方库，如 dropzone.js 或 filepond。这些库提供了更丰富的文件选择和上传功能。

// 使用 dropzone.js 示例
Dropzone.options.myDropzone = {
  url: "/upload",
  dictDefaultMessage: "拖拽文件夹或点击选择",
  acceptedFiles: "*/*",
  init: function() {
    this.on("addedfiles", function(files) {
      console.log(files);
    });
  }
};

第三方库通常提供更好的用户体验和跨浏览器支持。