js showOpenFilePicker showSaveFilePicker showDirectoryPicker API
选择文件,获取文件句柄
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/
js showOpenFilePicker showSaveFilePicker showDirectoryPicker API的更多相关文章
- ArcGIS Js/Flex等前端API(Query(StatisticDefinition)时)针对SDE的SHAPE.AREA/SHAPE.LEN知道查询无效,而对GDB的SHAPE_Area/SHAPE_Length有效探索。
FIeld 'SHAPE.AREA' and 'SHAPE.LEN' of SDE For Oracle,Field 'SHAPE_Area' and 'SHAPE_Length' of gdb(ge ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- echart.js的使用与API
---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...
- Web3.js 0.20.x API 中文版翻译
文档原始链接为:https://web3.learnblockchain.cn/0.2x.x/,欢迎大家前往查阅,本文只是节选开头部分的介绍及API列表索引,以下为翻译正文: 为了开发一个基于以太坊的 ...
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...
- 当 jquery.unobtrusive-ajax.js 遇上Web API
最近在熟悉Abp框架,其基于DDD领域驱动设计...前段可以绕过mvc直接调用根据app层动态生成的webapi,有点神奇~,Web API之前有简单接触过,WCF的轻量级版,一般用于做一写开发性的服 ...
- JS操作DOM常用API总结
<JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...
- JS版百度地图API
地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...
- js调用百度地图API创建地图,搜索位置
实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
随机推荐
- 【网络安全】IOC概念浅析
OpenIOC(Open Indicator of Compromise,开放威胁指标) MANDIANT 公司发布的情报共享规范,是开源.灵活的框架.OpenIOC是一个记录.定义以及共享威胁情报的 ...
- LOJ10065 北极通讯站
Waterloo University 2002 北极的某区域共有 n 座村庄,每座村庄的坐标用一对整数 (x,,y) 表示.为了加强联系,决定在村庄之间建立通讯网络.通讯工具可以是无线电收发机,也可 ...
- Python 学习笔记(1)
Mac下载安装Python mac 系统自带有python .但就最新的mac系统而言,它自带的python版本为2.*版本. 虽然不影响对于老python项目的运行,但3.*版本中很多语法都发生了改 ...
- docker基本使用-安装
一. Linux服务器安装 1. 可参考官网安装步骤,点击前往官网 2. 常见问题 a. 在执行安装docker-ce命令的时候出错:requires containerd.io >= 1.2. ...
- Spark调优 | Spark Streaming 调优
Spark调优 | Spark Streaming 调优 1.数据序列化 2.广播大变量 3.数据处理和接收时的并行度 4.设置合理的批处理间隔 5.内存优化 5.1 内存管理 5.2优化策略 5.3 ...
- Spark Dataset DataFrame空值null,NaN判断和处理
Spark Dataset DataFrame空值null,NaN判断和处理 import org.apache.spark.sql.SparkSession import org.apache.sp ...
- Flink-v1.12官方网站翻译-P029-User-Defined Functions
用户自定义函数 大多数操作都需要用户定义的函数.本节列出了如何指定这些函数的不同方法.我们还涵盖了累加器,它可以用来深入了解您的Flink应用. Lambda函数 在前面的例子中已经看到,所有的操作都 ...
- 500行SQL快速实现UCF
写在前面话 UCF通常是User-base Collaborative Filter的简写;大体的算法思路是根据用户行为计算相似群体(邻居),为用户推荐其邻居喜好的内容:感觉是不是很简单.那废话不多说 ...
- Could not transfer artifact org.apache.maven.plugins:maven-clean-plugin:pom:2.5 from 这类问题的解决方法
最近换了台电脑,所以重新在IEDA上搭建Spring Boot环境,遇到一个问题,网上查了很久,又实践了一通,终于解决,这里把步骤详细记录下来. 问题描述:创建IDEA的Maven项目后,出现 Mav ...
- CF1463-A. Dungeon
题意: 你面前有三个怪物,他们分别有a, b, c点血量.现在你可以指定一个怪物,用大炮向他们射击,之后该怪物就会掉一滴血.每七次射击就会使得炮弹威力加强一次,即第7, 14, 21次射击的时候炮弹威 ...