HTML5实现同时选择多个文件夹上传的使用示例

admin

HTML5实现同时选择多个文件夹上传的使用示例

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

选择多个文件

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

例如，以下代码演示了如何创建一个允许选择多个文件的文件上传输入框：

1. <input type="file" multiple>

复制代码

选择文件夹

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

例如，以下代码演示了如何创建一个允许选择文件夹的文件上传输入框：

1. <input type="file" webkitdirectory>

复制代码

选择多个文件夹

虽然`<input type="file">`元素允许用户选择多个文件，也可以选择单个文件夹，但它不支持选择多个文件夹。

那么，如果你需要选择多个文件夹，就可以使用拖放API来实现。用户可以将多个文件夹拖放到指定的区域，并通过JavaScript代码处理这些文件夹。

以下是一个示例代码，演示如何使用拖放API来选择多个文件夹：

1. <div id="dropzone">将文件夹拖放到此处</div>
   
2. <script>
   
3. const dropzone = document.getElementById('dropzone');
   
4. dropzone.addEventListener('dragover', function(event) {
   
5.   event.preventDefault();
   
6.   dropzone.classList.add('dragover');
   
7. });
   
8. dropzone.addEventListener('dragleave', function(event) {
   
9.   event.preventDefault();
   
10.   dropzone.classList.remove('dragover');
    
11. });
    
12. dropzone.addEventListener('drop', function(event) {
    
13.   event.preventDefault();
    
14.   dropzone.classList.remove('dragover');
    
15.   const items = event.dataTransfer.items;
    
16.   for (let i = 0; i < items.length; i++) {
    
17.     const item = items[i];
    
18.     if (item.kind === 'file' && item.webkitGetAsEntry().isDirectory) {
    
19.       const directory = item.webkitGetAsEntry();
    
20.       console.log(directory.name);
    
21.       // 在这里可以对每个文件夹进行处理，比如遍历文件夹中的文件
    
22.     }
    
23.   }
    
24. });
    
25. </script>

复制代码

在上面的示例中，我们创建了一个拖放区域`<div id="dropzone">`，当用户将文件夹拖放到该区域时，会触发`dragover`、`dragleave`和`drop`事件。我们可以使用这些事件来处理拖放的文件夹。

在`drop`事件的处理程序中，我们使用`event.dataTransfer.items`获取拖放的项目列表。然后，我们可以遍历这个项目列表，并检查每个项目是否为文件夹。如果是文件夹，我们可以进一步处理它。

请注意，拖放API的兼容性可能因浏览器而异，特别是在处理文件夹时。因此，在实际使用时，你可能需要进行更多的测试和兼容性处理。