不使用file类型input也能触发文件上传 « 张鑫旭-鑫空间-鑫生活

这篇文章发布于 2021年08月22日，星期日，10:43，归类于 JS API。阅读 35412 次, 今日 6 次 8 条评论

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10085 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、温故而知新

传统在Web端文件上传，都是使用file类型的表单input框：

<input type="file">

file input框

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

功能还是很强的。

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

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

虽然使用 <label> 元素可以模拟点击按钮，通过 for 属性指向file input实现类似效果，但是啰嗦了点。

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

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

二、showOpenFilePicker方法

假设页面上有个按钮，其HTML如下所示：

<button id="button">选择图片</button>

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

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

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

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=10085（作者张鑫旭）

当然，我们也可以使用 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页面这个蓝色按钮：

点击蓝色按钮