文章转自张鑫旭博客，原文地址：https://www.zhangxinxu.com/wordpress/2021/08/file-system-access-api/
一、温故而知新
<input type="file">file input框
我们可以通过accept属性指定选择的文件类型，directory属性指定是否可以选择文件夹，capture属性指定前置或后置摄像头。
功能还是很强的。
具体可以见我之前这篇文章：“HTML input type=file文件选择二三事”
但是file输入框有个致命的缺点，就是 UI 太丑了，并且无法定制。
虽然使用 元素可以模拟点击按钮，通过 for 属性指向file input实现类似效果，但是啰嗦了点。
那有没有什么办法点击一个普通的按钮，也能触发文件选择呢？最好可以设置选择文件夹还是文件，设置选择的文件格式类型。
还真有，现代Web不断发展，出现了一个新的API，叫做 File System Acces s API，可以实现点击任意元素触发文件选择。
二、showOpenFilePicker方法
选择图片
button.addEventListener('click', function () {
// 打开文件
window.showOpenFilePicker();
});真是简单又粗暴，直接又了当。
当然，我们也可以使用 showDirectoryPicker() 方法来选择文件夹。
button.addEventListener('click', function () {
// 打开文件夹
window.showDirectoryPicker();
});由于两个API参数和作用类似，因此里只详细介绍文件的选择。
文件类型、多选与否的指定
其中，options是可选参数，支持下面这些属性：
multiple
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
兼容性
不过，有不少项目做了mix混合处理，也就是写了个 JS，支持的浏览器使用 File System Access API，不支持的浏览器还是使用传统的
如果是文件保存或下载，则可以试试window.showSaveFilePicker()这个 API，有时候可以介绍下，当然，实际开发，文件下载肯定是使用 FileSaver.js ，这可以文件下载当仁不让的王者，标杆项目。
其他限制安全