HTML5如何实现同时选择多个文件夹上传

本文介绍: HTML5的上传API可以支持同时选择多个文件和选择单个文件夹，但不支持同时选择多个文件夹。如果想同时选择多个文件夹，那只能另辟蹊径，不使用而是使用拖放API来实现选择多个文件夹，再执行上传处理。

HTML5的上传API可以支持同时选择多个文件和选择单个文件夹，但不支持同时选择多个文件夹。如果想同时选择多个文件夹，那只能另辟蹊径，不使用<input type="file">，而是使用拖放API来实现选择多个文件夹，再执行上传处理。

想选择多个文件很简单，使用<input type="file" multiple>可以让用户选择多个文件。通过将multiple属性添加到<input type="file">元素中，用户就可以在文件选择对话框中选择多个文件。当用户选择多个文件时，这些文件将作为一个文件列表一起提交。

&lt;input type="file" multiple&gt;

如果想选择单个文件夹也很简单，使用<input type="file" webkitdirectory>可以让用户选择文件夹。通过将webkitdirectory属性添加到<input type="file">元素中，用户就可以在文件选择对话框中选择文件夹，但只能选择一个文件夹。

<input type="file" webkitdirectory&gt;

<div id="dropzone"&gt;将文件夹拖放到此处</div>

<script>
const dropzone = document.getElementById('dropzone');

dropzone.addEventListener('dragover', function(event) {
  event.preventDefault();
  dropzone.classList.add('dragover');
});

dropzone.addEventListener('dragleave', function(event) {
  event.preventDefault();
  dropzone.classList.remove('dragover');
});

dropzone.addEventListener('drop', function(event) {
  event.preventDefault();
  dropzone.classList.remove('dragover');

  const items = event.dataTransfer.items;

  for (let i = 0; i < items.length; i++) {
    const item = items[i];

    if (item.kind === 'file' &amp;&amp; item.webkitGetAsEntry().isDirectory) {
      const directory = item.webkitGetAsEntry();
      console.log(directory.name);
      // 在这里可以对每个文件夹进行处理，比如遍历文件夹中的文件
    }
  }
});
</script>