zl程序教程

您现在的位置是:首页 >  其他

当前栏目

使用file-selector-button美化原生文件上传

文件上传 File 原生 button 美化 Selector 使用
2023-09-14 09:06:45 时间

前言

你平时见到的上传文件是下面这样的?

image-20230218180031880

还是下面这种美化过的button样式

image-20230218180437929

还是下面这种复杂的上传组件。

image-20230218180419968

<input type="file" >:只要指定的是type类型的input,打开浏览器就是上面第一种原生的浏览器默认的很丑的样式。

下面的两种是我从ElementUI截的图,ElementUI在实现这两种上传组件的时候,用的是下面的方法:

定义button负责样式,模拟上传按钮。定义一个默认隐藏的input负责打开选择文件的窗口。当点击按钮的时候,会自动调用input的click事件。

<div tabindex="0" class="el-upload el-upload-