js showOpenFilePicker showSaveFilePicker showDirectoryPicker API
2024-08-30 07:58:48
选择文件，获取文件句柄
btn.addEventListener("click", async (e) => {
try {
const hFiles = await window.showOpenFilePicker({
types: [
{
description: "文本文件",
accept: {
"text/plain": [".txt"],
},
},
],
});
if (!hFiles || !hFiles.length) return;
const hFile = hFiles[0];
l(hFile);
} catch (error) {
console.error(error);
}
});
从文件句柄中获取文件的内容
const file = await hFile.getFile();
const r = new FileReader();
r.readAsText(file);
r.onload = (e) => {
const fileData = e.target.result;
l(fileData);
};
// or
l(await file.text());
l(await file.arrayBuffer());
l(await file.stream().getReader().read());
使用文件句柄写入内容
const w$ = await hFile.createWritable();
await w$.write('hello ');
await w$.write('world');
await w$.close();
使用 showSaveFilePicker
const hFile = await window.showSaveFilePicker();
const w = await hFile.createWritable();
await w.write('new data');
await w.close();
打开目录
const hDir = await window.showDirectoryPicker();
// 打印文件名，和类型
for await (const it of hDir.values()) {
l('[[ %s ]] is %s', it.name, it.kind);
}
// 打印文件名和句柄
for await (const [name, handle] of hDir) {
l(name, handle);
}
在目录句柄中创建一个新的目录(名叫"NewDir"的目录)，返回新创建目录的句柄
const hNewDir = await hDir.getDirectoryHandle("NewDir", {
create: true,
});
在目录句柄中创建一个新的文件(名叫"newFile.txt"的文件)，返回新创建文件的句柄
const hNewFile = await hDir.getFileHandle("newFile.txt", {
create: true,
});
往新创建的文件中写入内容
const w$ = await hNewFile.createWritable();
await w$.write('在新创建的文件中写入内容');
await w$.close();
遍历整个目录
const scanDir = async (root, hDir) => {
for await (const [name, handle] of hDir) {
const path = await root.resolve(handle);
if (handle instanceof FileSystemDirectoryHandle) {
l("./%s/", path.join("/"));
scanDir(root, handle);
} else l("./%s", path.join("/"));
}
};
scanDir(hDir, hDir);
删除目录中指定的文件
await hDir.removeEntry('newFile.txt');
在目录中递归删除子目录
await hDir.removeEntry("Debug", { recursive: true });
isSameEntry
如果是同一文件或目录则返回true
const hDir = await window.showDirectoryPicker();
const hFile = await hDir.getFileHandle("3.txt");
console.log( await hFile.isSameEntry(hFile) ); // true
console.log( await hDir.isSameEntry(hDir) ); // true
console.log( await hFile.isSameEntry(hDir) ); // false
console.log( await hDir.isSameEntry(hFile) ); // false
resolve
获取文件在目录中的路径
const hDir = await window.showDirectoryPicker();
const hFile = await hDir.getFileHandle("3.txt");
console.log( await hDir.resolve(hFile) ) // ["3.txt"]
See also:
- https://web.dev/file-system-access/
- https://www.youtube.com/watch?v=GNuG-5m4Ud0
- https://wicg.github.io/file-system-access/
最新文章
- jquery常用函数与方法
- LinuxMint 18 编译cm13.0 笔记
- 数学 - Whu 1603 - Minimum Sum
- 屠龙之路_狭路相逢勇者胜_EighthDay
- Laplacian算子
- iOS UILabel根据字符串长度自动适应宽度和高度
- sphinx
- iframe中子页面通过js计算高度（使得页面不会显示不全）
- Eclipse的NDEF插件诞生，将加速NFC应用开发
- git 克隆到本地linux目录的2种方式
- CTF 文件包含与伪协议
- django framework相关的错误信息
- Java中NIO和IO区别和适用场景
- MySQL查询缓存总结
- 用java代码作日历
- Struts框架(6)---action接收请求参数
- linux 用户管理 groupadd、groupmod、groupdel、gpasswd
- jQuery之scroll用法实例
- Vue2.0 render:h => h(App)
- ML.NET 0.9 版本发布---.net下的机器学习引擎