前端選擇整個(gè)文件夾
在showDirectoryPicker api出來(lái)之前 前端是沒有辦法選擇整個(gè)文件夾的。
如何使用 showDirectoryPicker API
安全上下文: 此項(xiàng)功能僅在一些支持的瀏覽器的安全上下文（HTTPS）中可用。
實(shí)驗(yàn)性: 這是一項(xiàng)實(shí)驗(yàn)性技術(shù)
兼容性如下
用法
window.showDirectoryPicker().then(res=>{
//res 為 FileSystemDirectoryHandle 對(duì)象。
})// 返回值為一個(gè)Promise
FileSystemDirectoryHandle 接口提供指向一個(gè)文件系統(tǒng)目錄的句柄。
常用方法
FileSystemDirectoryHandle.entries()
返回給定對(duì)象自己的可枚舉屬性的 [key, value] 對(duì)的新異步迭代器。 key為文件名 value如果是文件則為 FileSystemFileHandle類型 如果是文件夾則是FileSystemDirectoryHandle類型
FileSystemFileHandle
常用方法
從父類 FileSystemHandle 繼承方法。
返回一個(gè) Promise 對(duì)象，可兌現(xiàn)一個(gè) File 對(duì)象，該對(duì)象表示句柄所代表的條目在磁盤上的狀態(tài)。 使用await語(yǔ)法即（let file = await dir[1].getFile()）可以獲取到file流
拿到文件流就可以通過(guò)類似的代碼
const reader = new FileReader(); // 創(chuàng)建文件讀取對(duì)象
// 處理圖片
reader.onload = function(e) {
e.target.result; // 獲取到圖片文件的base64
};
reader.readAsDataURL(file);
下面是一個(gè)使用showDirectoryPicker 讀取文件夾內(nèi)的內(nèi)容并展示到頁(yè)面上的例子
<!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(); // 創(chuàng)建文件讀取對(duì)象
if (fileType.startsWith('image/')) {
// 處理圖片
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result; // 設(shè)置圖片路徑為讀取的結(jié)果
document.getElementById('imageDisplay').appendChild(img); // 將圖片添加到頁(yè)面
};
reader.readAsDataURL(file); // 讀取文件內(nèi)容為 Data URL
} else {
// 處理文本文件
reader.onload = function(e) {
const text = e.target.result; // 獲取文本內(nèi)容
document.getElementById('textDisplay').textContent = text; // 設(shè)置文本內(nèi)容
document.getElementById('textDisplay').style.display = 'block'; // 顯示文本元素
};
reader.readAsText(file); // 讀取文件內(nèi)容為文本
}
}
}
</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
