松鼠的博客

文檔

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input
上傳文件夾，主要的參數webkitdirectory

瀏覽器上傳文件夾，瀏覽器會彈出詢問窗口

兼容性
https://caniuse.com/?search=webkitdirectory

代碼如下

<!-- 選擇文件 -->
<div>
<label for="upload-file">點擊選擇文件</label>
<input
title="點擊選擇文件"
id="upload-file"
multiple=""
accept="*/*"
type="file"
name="html5uploader"
/>
</div>

<!-- 選擇文件夾 -->
<div style="margin-top: 20px">
<label for="upload-directory">點擊選擇文件夾</label>
<input
title="點擊選擇文件夾"
id="upload-directory"
multiple=""
webkitdirectory=""
accept="*/*"
type="file"
name="html5uploader"
/>
</div>

<script>
// 選擇文件
document
.querySelector('#upload-file')
.addEventListener('input', function (event) {
for (let file of event.target.files) {
console.log(file)
}
})

// 選擇文件夾
document
.querySelector('#upload-directory')
.addEventListener('input', function (event) {
for (let file of event.target.files) {
console.log(file)
// 屬性 webkitRelativePath 有值
}
})
</script>

參考文章：http://blog.ncmem.com/wordpress/2023/12/26/%e5%89%8d%e7%ab%af%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e6%88%96%e8%80%85%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%a4%b9/

歡迎入群一起討論