别再用input file做上传组件了

李剑一2025-07-14 16:54

最近写密码管理的小App，本来是打算的开发完以后，通过数据库直接导数据，既方便又快捷。

但是发现因为存在加密程序的缘故，直接导显然不现实。所以新加了一个导入的功能，又因为框架使用的AntDesign，用他那个上传限制比较多，所以自己简单封装一个。

普通上传

一般我们封装上传都是用<input type="file" />进行操作。

html 复制代码

<button onclick="targetFileUpload">上传</button>

<input type="file" id="fileInputId" oninput="upload" />

<script>
    function targetFileUpload() {
        document.getElementById('fileInputId').click();
    }

    function upload() {
        // 上传逻辑
    }
</script>

showOpenFilePicker上传

使用window.showOpenFilePicker方法触发上传操作个人感觉是更优的选择。

js 复制代码

const [fileHandle] = await window.showOpenFilePicker({
    types: [
        {
            description: '测试数据',
            accept: {
                'application/json': ['.json']
            }
        }
    ]
});
const file = await fileHandle.getFile();

优劣对比

兼容性

<input type="file">兼容性更好，几乎所有浏览器都支持这种传统的文件上传方式，包括旧版本的浏览器。

showOpenFilePicker的兼容性如下图所示:

用户体验

如果直接定义上传文件框，更推荐使用<input type="file">，使用CSS再调调样式即可。

但是如果是使用Button触发，或者拖拽触发，更推荐使用showOpenFilePicker。

开发控制度

<input type="file">一般而言开发很难控制的颗粒度非常精细，尤其是对于文件的选择和读取权限方面。

showOpenFilePicker几乎能控制到文件选择的每一个步骤。

总结

老旧浏览器选择<input type="file">。
新浏览器选择showOpenFilePicker。