选择多个文件
<input type="file" multiple />
选择文件夹
选择文件夹下所有文件及递归选择下面所有文件夹的文件
webkitdirectory:适配webkit内核浏览器
mozdirectory:适配火狐浏览器
odirectory:适配opera内核浏览器
IE浏览器不支持
<input type="file" webkitdirectory mozdirectory odirectory />
拖拽获取选择文件
<div id="container" style="width: 300px;height: 100px;border: 1px solid #999999;"></div>
<script>
const div = document.getElementById('container')
// 有东西进入时触发
div.ondragenter = (e) => {
e.preventDefault()
}
// 有东西在上面时触发
div.ondragover = (e) => {
e.preventDefault()
}
// 东西离开时触发
div.ondrop = (e) => {
e.preventDefault()
const items = e.dataTransfer.items
for (let item of items) {
const entry = item.webkitGetAsEntry() // webkitGetAsEntry文件句柄获取entry对象
if(entry.isFile) {
// 处理文件:拿到file文件
entry.file((file) => {
console.log('file::', file)
})
} else {
// 处理文件夹:文件夹中的文件file对象
const reader = entry.createReader() // 文件夹读取器
reader.readEntries((entries) => {
console.log('entries::', entries)
})
}
}
}
</script>