前端选择整个文件夹
在showDirectoryPicker api出来之前 前端是没有办法选择整个文件夹的。
如何使用 showDirectoryPicker API
安全上下文: 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。
实验性: 这是一项实验性技术
兼容性如下
showDirectoryPicker兼容性.jpg
用法
window.showDirectoryPicker().then(res=>{
//res 为 FileSystemDirectoryHandle 对象。
})// 返回值为一个Promise
FileSystemDirectoryHandle 接口提供指向一个文件系统目录的句柄。
常用方法
FileSystemDirectoryHandle.entries()
返回给定对象自己的可枚举属性的 [key, value] 对的新异步迭代器。 key为文件名 value如果是文件则为 FileSystemFileHandle类型 如果是文件夹则是FileSystemDirectoryHandle类型
FileSystemFileHandle
常用方法
从父类 FileSystemHandle 继承方法。
返回一个 Promise 对象，可兑现一个 File 对象，该对象表示句柄所代表的条目在磁盘上的状态。 使用await语法即（let file = await dir[1].getFile()）可以获取到file流
拿到文件流就可以通过类似的代码
const reader = new FileReader(); // 创建文件读取对象
// 处理图片
reader.onload = function(e) {
e.target.result; // 获取到图片文件的base64
};
reader.readAsDataURL(file);
下面是一个使用showDirectoryPicker 读取文件夹内的内容并展示到页面上的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="open_file">打开文件</button>
<div id="imageDisplay" class="file_list"></div>
<div id="textDisplay" class="file_list"></div>
<script>
let openFile = document.querySelector('.open_file');
openFile.addEventListener('click', async () => {
console.log('open file');
window.showDirectoryPicker().then(async res => {
console.log(res);
let down = await res.getFileHandle('download-logo.png')
// FileSystemDirectoryHandle.getDirectoryHandle()
console.log(down,'downdown');
const dirs = await res.entries()
console.log(dirs);
for await (const dir of dirs) {
let file = await dir[1].getFile();
console.log(file,'file');
progressFileHandler(file);
}
});
});
const progressFileHandler = async (file) => {
if (file) {
const fileType = file.type; // 获取文件类型
const reader = new FileReader(); // 创建文件读取对象
if (fileType.startsWith('image/')) {
// 处理图片
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result; // 设置图片路径为读取的结果
document.getElementById('imageDisplay').appendChild(img); // 将图片添加到页面
};
reader.readAsDataURL(file); // 读取文件内容为 Data URL
} else {
// 处理文本文件
reader.onload = function(e) {
const text = e.target.result; // 获取文本内容
document.getElementById('textDisplay').textContent = text; // 设置文本内容
document.getElementById('textDisplay').style.display = 'block'; // 显示文本元素
};
reader.readAsText(file); // 读取文件内容为文本
}
}
}
</script>
</body>
</html>
参考
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showOpenFilePicker
https://developer.mozilla.org/zh-CN/docs/Web/API/FileSystemFileHandle
https://developer.mozilla.org/zh-CN/docs/Web/API/FileSystemDirectoryHandle
