HTML5的上傳API可以支持同時選擇多個文件和選擇單個文件夾，但不支持同時選擇多個文件夾。如果想同時選擇多個文件夾，那只能另辟蹊徑，不使用<input type="file">，而是使用拖放API來實現(xiàn)選擇多個文件夾，再執(zhí)行上傳處理。

選擇多個文件

想選擇多個文件很簡單，使用<input type="file" multiple>可以讓用戶選擇多個文件。通過將multiple屬性添加到<input type="file">元素中，用戶就可以在文件選擇對話框中選擇多個文件。當用戶選擇多個文件時，這些文件將作為一個文件列表一起提交。

例如，以下代碼演示了如何創(chuàng)建一個允許選擇多個文件的文件上傳輸入框：

<input type="file" multiple>

選擇文件夾

如果想選擇單個文件夾也很簡單，使用<input type="file" webkitdirectory>可以讓用戶選擇文件夾。通過將webkitdirectory屬性添加到<input type="file">元素中，用戶就可以在文件選擇對話框中選擇文件夾，但只能選擇一個文件夾。

例如，以下代碼演示了如何創(chuàng)建一個允許選擇文件夾的文件上傳輸入框：

<input type="file" webkitdirectory>

選擇多個文件夾

雖然`<input type="file">`元素允許用戶選擇多個文件，也可以選擇單個文件夾，但它不支持選擇多個文件夾。

那么，如果你需要選擇多個文件夾，就可以使用拖放API來實現(xiàn)。用戶可以將多個文件夾拖放到指定的區(qū)域，并通過JavaScript代碼處理這些文件夾。

以下是一個示例代碼，演示如何使用拖放API來選擇多個文件夾：

<div id="dropzone">將文件夾拖放到此處</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' && item.webkitGetAsEntry().isDirectory) {
? ? ? const directory = item.webkitGetAsEntry();
? ? ? console.log(directory.name);
? ? ? // 在這里可以對每個文件夾進行處理，比如遍歷文件夾中的文件
? ? }
? }
});
</script>

在上面的示例中，我們創(chuàng)建了一個拖放區(qū)域`<div id="dropzone">`，當用戶將文件夾拖放到該區(qū)域時，會觸發(fā)`dragover`、`dragleave`和`drop`事件。我們可以使用這些事件來處理拖放的文件夾。

在`drop`事件的處理程序中，我們使用`event.dataTransfer.items`獲取拖放的項目列表。然后，我們可以遍歷這個項目列表，并檢查每個項目是否為文件夾。如果是文件夾，我們可以進一步處理它。

請注意，拖放API的兼容性可能因瀏覽器而異，特別是在處理文件夾時。因此，在實際使用時，你可能需要進行更多的測試和兼容性處理。

到此這篇關(guān)于HTML5實現(xiàn)同時選擇多個文件夾上傳的使用示例的文章就介紹到這了,更多相關(guān)HTML5多個文件夾上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論