文章转自张鑫旭博客，原文地址：https://www.zhangxinxu.com/wordpress/2021/08/file-system-access-api/

一、温故而知新
传统在Web端文件上传，都是使用file类型的表单input框：

<input type="file">

file input框

我们可以通过accept属性指定选择的文件类型，directory属性指定是否可以选择文件夹，capture属性指定前置或后置摄像头。

功能还是很强的。

具体可以见我之前这篇文章：“HTML input type=file文件选择二三事”

但是file输入框有个致命的缺点，就是 UI 太丑了，并且无法定制。

虽然使用

那有没有什么办法点击一个普通的按钮，也能触发文件选择呢？最好可以设置选择文件夹还是文件，设置选择的文件格式类型。

还真有，现代Web不断发展，出现了一个新的API，叫做 File System Access API，可以实现点击任意元素触发文件选择。

二、showOpenFilePicker方法
假设页面上有个按钮，其HTML如下所示：


则下面几行JavaScript代码就可以实现点击按钮出现文件选择：

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

真是简单又粗暴，直接又了当。

当然，我们也可以使用 showDirectoryPicker() 方法来选择文件夹。

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

由于两个API参数和作用类似，因此里只详细介绍文件的选择。

文件类型、多选与否的指定
showOpenFilePicker(options) 方法中是可以传参的，具体支持的参数如下：

其中，options是可选参数，支持下面这些属性：

multiple
布尔值，默认值是 false ，表示只能选择一个文件。
excludeAcceptAllOption
布尔值，默认值是 false ，表示是否排除下面 types 中的所有的accept文件类型。
types
可选择的文件类型数组，每个数组项也是个对象，支持下面两个参数：
description：表示文件或者文件夹的描述，字符串，可选。
accept：接受的文件类型，对象，然后对象的键是文件的MIME匹配，值是数组，表示支持的文件后缀。具体可以下面的示意。
例如下面的JS代码执行就是可以一次性选择多张本地桌面图片：

window.showOpenFilePicker({
    types: [{
        description: 'Images',
        accept: {
            'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
        }
    }],
    // 可以选择多个图片
    multiple: true
});

三、演示-点击按钮选择并显示多图
上面知道了选择文件，但是如何处理选择后的文件呢，下面有个例子，对大家学习会很有帮助。

完整代码如下：

<button id="button">选择图片</button>
<p id="output"></p>
button.addEventListener('click', async function () {
    // 打开文件
    const arrFileHandle = await window.showOpenFilePicker({
        types: [{
            accept: {
                'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
            }
        }],
        // 可以选择多个图片
        multiple: true
    });
    
    // 遍历选择的文件
    for (const fileHandle of arrFileHandle) {
        // 获取文件内容
        const fileData = await fileHandle.getFile();
        // 读文件数据
        const buffer = await fileData.arrayBuffer();
        // 转成Blod url地址
        let src = URL.createObjectURL(new Blob([buffer]));
        // 在页面中显示
        output.insertAdjacentHTML('beforeend', `<img src="${src}">`);
    }
});

这个例子有对应的demo，您可以狠狠地点击这里：文件访问API 触发图片选择demo

点击demo页面这个蓝色按钮：

点击蓝色按钮

选择自己电脑中对应的图片，例如我选择了2张不错的PNG图片：

选择图像截图示意

结果在Web页面上成功预览了图片效果，如下截图所示：

页面上预览效果示意

是不是跟传统的file文件选择很类似。

由于这些全新的API都是走的Promise，因此，可以使用async、 await等新的JS语法，避免各种乱糟糟的回调，代码更简洁更易读了。

是不是很赞！

四、可惜是个新API
对于不喜欢HTML表单元素，喜欢JavaScript代码一把梭的开发者而言，这个API会很亲近很喜欢，但是，遗憾的是，这个API出来的比较新，去年下半年才出来，Safari浏览器并不支持，因此，不能直接使用。

兼容性

不过，有不少项目做了mix混合处理，也就是写了个 JS，支持的浏览器使用 File System Access API，不支持的浏览器还是使用传统的 ，例如谷歌实验室的这个项目 browser-fs-access

如果是文件保存或下载，则可以试试window.showSaveFilePicker()这个 API，有时候可以介绍下，当然，实际开发，文件下载肯定是使用 FileSaver.js，这可以文件下载当仁不让的王者，标杆项目。

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

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1071.html

转载时须注明出处及本声明

标签: none

添加新评论