前端不使用file类型input也能触发文件上传

showOpenFilePicker方法

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

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

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

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

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

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

件类型、多选与否的指定
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}">`);
    }
});

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