在前端開發中，我們經常需要使用javascript來處理用戶的文件上傳，文件夾選擇成為一個非常重要的功能。本文將詳細介紹如何使用javascript對文件夾進行選擇，并提供相關的示例代碼供參考。
一、使用元素選擇文件夾
一個最簡單的文件夾選擇方式就是使用HTML5的元素。該元素有一個type屬性，設置為file時，點擊該元素會彈出文件選擇框，可以多選文件。然而，input元素無法直接選擇文件夾，而是需要使用webkitdirectory屬性才能實現。下面是一個簡單的例子：
<input type="file" webkitdirectory directory="" /><input type="file" webkitdirectory directory="" onchange="onFolderChange(event)" />
<script>
function onFolderChange(event) {
var files = event.target.files;
for (var i = 0; i< files.length; i++) {
var file = files[i];
if (file.type.startsWith('image/')) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
var img = document.createElement('img');
img.src = reader.result;
document.body.appendChild(img);
}
}
}
}
</script><html>
<head>
<link rel="stylesheet" />
</head>
<body>
<input type="file" class="filepond">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
FilePond.parse(document.body);
</script>
</body>
</html>上一篇css多個氣球自然震動
下一篇python矩陣變量聲明