当前位置: 首页 > news >正文

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

前言

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

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-
http://www.lryc.cn/news/21169.html

相关文章:

  • 0402换元积分法-不定积分
  • 信号类型(雷达)——脉冲雷达(三)
  • 并查集(13张图解)--擒贼先擒王
  • Flutter3引用原生播放器-IOS(Swift)篇
  • 【蓝桥杯每日一题】双指针算法
  • 拼数(一般贪心)
  • LeetCode 热题 C++ 169. 多数元素 10. 正则表达式匹配 155. 最小栈
  • Clickhouse学习:MergeTree
  • 【java基础】包装类,自动装箱和自动拆箱
  • Android笔记(二十五):两种sdk热更插件资源加载方案
  • spring框架--全面详解(学习笔记)
  • 2023年CDGA考试模拟题库(401-500)
  • 软件设计师备考文档
  • Javascript的API基本内容(一)
  • 10、最小公倍数
  • 【vue】vue2.x项目中使用md文件
  • 操作系统权限提升(十三)之绕过UAC提权-MSF和CS绕过UAC提权
  • 快速排序+快速定位
  • nginx http rewrite module 详解
  • 机器学习可解释性一(LIME)
  • CV学习笔记-MobileNet
  • C++进阶——继承
  • 数据结构---单链表
  • redis数据结构的底层实现
  • 【JavaSE】复习(进阶)
  • Java 主流日志工具库
  • 产品经理有必要考个 PMP吗?(含PMP资料)
  • 什么是原型、原型链?原型和原型链的作用
  • 条件期望4
  • 网络协议分析(2)判断两个ip数据包是不是同一个数据包分片