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

選擇多個(gè)文件

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

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

<input type="file" multiple>

選擇文件夾

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

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

<input type="file" webkitdirectory>

選擇多個(gè)文件夾

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

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

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

<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);
? ? ? // 在這里可以對每個(gè)文件夾進(jìn)行處理，比如遍歷文件夾中的文件
? ? }
? }
});
</script>

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

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

請注意，拖放API的兼容性可能因?yàn)g覽器而異，特別是在處理文件夾時(shí)。因此，在實(shí)際使用時(shí)，你可能需要進(jìn)行更多的測試和兼容性處理。

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

最新評論