利用google提供的showOpenFilePicker()和showDirectoryPicker()，我们可以实现直接读取文件夹和文件，十分方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="getdir">选择文件夹</button>
<button id="getjson">读取json文件</button>
</body>
</html>
<script type="module">
const files = [];
document.getElementById('getjson').addEventListener('click', () => {
window.showOpenFilePicker().then((fileHandles) => {
const [fh] = fileHandles;
fh.getFile().then(file => {
console.log("file:", file);
// 读取文本内容
const reader = new FileReader();
reader.onload = (e) => {
let configJsonObj = JSON.parse(e.target.result);
console.log('读取json文件', configJsonObj);
};
reader.readAsText(file);
});
});
});
document.getElementById('getdir').addEventListener('click', () => {
window.showDirectoryPicker({
mode: "read",
startIn: "desktop",
})
.then(async (dirHandle) => {
const items = dirHandle.entries();
findFile(items);//获取所有文件
})
.catch((err) => {
console.error("打开目录失败: ", err);
});
});
async function findFile(arr) { //递归获取所有文件
for await (const [key, value] of arr) {
if (value instanceof FileSystemDirectoryHandle) {
findFile(value.entries());
} else if (value instanceof FileSystemHandle) {
console.log('获取文件', await value.getFile());
const file = await value.getFile();
files.push(file);
}
}
}
</script>
网友评论