showOpenFilePicker方法_实现了前端访问文件系统

更新日期: 2023-09-15阅读: 808标签: 文件

前言

在之前我们需要打开并访问本地文件,只能通过file类型的表单input框来实现,比如:

<input type="file">

通过accept属性指定选择的文件类型,directory属性指定是否可以选择文件夹,capture属性指定前置或后置摄像头。随着Web端的不断发展,出现了一个新的api,叫做 File System Access API,可以实现点击任意元素触发文件选择。


showOpenFilePicker方法

Window 接口的 showOpenFilePicker() 方法用于显示一个文件选择器,以允许用户选择一个或多个文件并返回这些文件的句柄。比如:

<button id="button">打开文件</button>

通过js事件监听,点击按钮出现文件选择:

button.addEventListener('click', function () {
window.showOpenFilePicker();//打开文件
});

如果需要选择文件夹,则需要使用showDirectoryPicker()方法:

button.addEventListener('click', function () {
window.showDirectoryPicker();//打开文件夹
});

两个API参数和作用类似,因此里只详细介绍showOpenFilePicker方法的使用。

参数:

window.showOpenFilePicker(options) 方法中是可以传参的,具体支持的参数如下:

options 可选,选项对象,包含以下属性:

multiple:布尔值,默认为 false。设为 true 时允许用户选择多个文件。

excludeAcceptAllOption:布尔值,默认为 false。默认情况下,文件选择器带有一个允许用户选择所有类型文件的过滤选项(展开于文件类型选项中)。设置此选项为 true 以使该过滤选项不可用。

types:表示允许选择的文件类型的 Array 数组,其中的元素为包含以下选项的对象:

  • description可选,对此允许文件类型集合的描述。
  • accept:Object 对象,带有键名为 MIME 类型、键值为包含文件扩展名的 Array 数组的键值对(参考下方的示例)。

返回值

一个 Promise 对象,会兑现一个包含 FileSystemFileHandle 对象的 Array 数组。 

异常 

AbortError 当用户直接关闭了文件选择器或选择的文件是不宜暴露给网站的敏感文件时将会抛出 AbortError。


showOpenFilePicker示例

在此处我们设置一个用于传递给方法的选项对象。我们将允许选择图片类型、不允许使用所有类型,也不能选择多个文件。

const pickerOpts = {
types: [
{
description: "Images",
accept: {
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
},
},
],
excludeAcceptAllOption: true,
multiple: false,
};

接下来我们创建一个异步函数来显示文件选择器并返回选择的文件。

// 创建用于存放文件句柄的变量。
let fileHandle;

async function getFile() {
// 打开文件选择器,解构返回的数组中的第一个元素
[fileHandle] = await window.showOpenFilePicker(pickerOpts);

// 操作 fileHandle 的后续代码
}


扩展

FileSystemFileHandle

FileSystemFileHandle提供了一些方法可以用来获取和操作文件

  • getFile:返回一个Promise对象,用于获取文件;
  • createSyncAccessHandle:返回一个FileSystemSyncAccessHandle对象,用于同步访问文件;
  • createWritable:返回一个Promise对象,用于创建一个可写流,用于写入文件;

FileSystemDirectoryHandle

FileSystemDirectoryHandle对象是一个代表文件系统中的目录的对象,它同样提供了方法来获取和操作目录

  • entries:返回一个AsyncIterable对象,用于获取目录中的所有文件和目录;
  • keys:返回一个AsyncIterable对象,用于获取目录中的所有文件和目录的名称;
  • values:返回一个AsyncIterable对象,用于获取目录中的所有文件和目录的FileSystemHandle对象;
  • getFileHandle:返回一个Promise对象,用于获取目录中的文件;
  • getDirectoryHandle:返回一个Promise对象,用于获取目录中的目录;
  • removeEntry:返回一个Promise对象,用于删除目录中的文件或目录;
  • resolve:返回一个Promise对象,用于获取目录中的文件或目录;

entries、keys、values这三个方法都是用来获取目录中的所有文件和目录的,它们返回的都是一个AsyncIterable对象,我们可以通过for await...of语法来遍历它。


兼容性

个人感觉这个api和file表单很类似,但对UI上更好设置,对于喜欢直接用js来实现代码的开发者更适合。但是目前这个API还处于实验阶段,大部分浏览器并不支持,

因此现在还不能直接使用。

浏览器兼容性


其他限制

  1. 需要https环境,如果是本地localhost 不受此限制。
  2. 不能在 iframe 内使用,因为被认为不安全


链接: https://www.fly63.com/article/detial/12515

h5移动端实现图片文件上传

PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。

前端使用js读取文件操作

首先我们定义一个input标签type=file、然后我们定义一个jsReadFiles的方法将文件作为参数;当上传文件的时候读取这个文件。图片上传成功,只是图片路径变成了base64编码的形式。

HTML5实现文件读取、编辑、保存

HTML5读取文件主要利用的就是FileReader这个API,它的使用需要从一个构造函数开始,保存文件的关键是生成文件对象,可以使用URL.createObjectURL()方法实现,该方法能返回给定对象的URL,用在<a>标签的href属性上就可以创建可下载的文件链接。

血淋淋的事实告诉你:你为什么不应该在JS文件中保存敏感信息

在JavaScript文件中存储敏感数据,不仅是一种错误的实践方式,而且还是一种非常危险的行为,长期以来大家都知道这一点。

在js文件中引入另一个js文件的实现方法总汇

比如我写了一个JS文件,这个文件需要调用另外一个JS文件,该如何实现呢?这篇文章主要介绍:在js文件中引入另一个js文件的实现

使用HTML5来实现本地文件读取和写入

最近有这样一个需求,就是在HTML页面中有个按钮导出,点击它,将构造一个文档并存储到本地文件系统中。另外还有个按钮,点击它,从本地文件系统中读取一个文件并对内容进行分析。

lock文件_我们为什么需要 lock 文件

从 Yarn 横空出世推出 lock 文件以来,已经两年多时间了,npm 也在 5.0 版本加入了类似的功能,lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件,以及它的一些成本与风险,当然其中一些观点对于后端也是适用的

什么是断点续传?前端如何实现文件的断点续传

什么是断点续传?就是下载文件时,不必重头开始下载,而是从指定的位置继续下载,这样的功能就叫做断点续传。前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接。

form表单文件上传_multipart/form-data文件上传

form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式.。application/x-www-form-urlencoded:默认编码方式,multipart/form-data:指定传输数据为二进制数据,例如图片、mp3、文件,text/plain:纯文本的传输。空格转换为“+”,但不支持特殊字符编码。

使用HttpClient发送文件流到服务器端

适用场景: 网络绝对路径的URL文件或图片,不存储到本地,转换成stream,直接使用HTTPClient传送到SpringBoot的服务端,将文件存储下来,并返回一个文件地址。目前分层架构的系统越来越多这种需求,所以记录下来以备不时之需。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!