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

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

news 2026/5/12 17:00:33

前言

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

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-

相关文章：

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

前言 你平时见到的上传文件是下面这样的？ 还是下面这种美化过的button样式 还是下面这种复杂的上传组件。 <input type="file" >：只要指定的是type类型的input，打开浏览器就是上面第一种原生的浏览器默认的很丑的样式。 下面的两种是我从ElementUI截的图，…...

编程日记 2023/2/26 22:37:49

0402换元积分法-不定积分

文章目录1 第一类换元法1.1 定理11.2 例题1.2 常见凑微分形式1.2.1常见基本的导数公式的逆运算1.2.2被积函数含有三角函数2 第二类换元法2.1 定理22.2 常见第二换元代换方法2.2.1 三角代换-弦代换2.2.2 三角代换-切代换2.2.3 三角代换-割代换2.2.4 三角代换汇总2.2.5 倒代换2.2…...

编程日记 2023/2/26 22:36:35

信号类型（雷达）——脉冲雷达（三）

系列文章目录 《信号类型&#xff08;雷达通信&#xff09;》 《信号类型&#xff08;雷达&#xff09;——雷达波形认识&#xff08;一&#xff09;》 《信号类型&#xff08;雷达&#xff09;——连续波雷达&#xff08;二&#xff09;》 文章目录 前言 一、相参雷达 1…...

编程日记 2023/2/26 22:35:28

并查集(13张图解)--擒贼先擒王

目录 前言 故事 &#x1f33c;思路 &#x1f33c;总结 &#x1f33c;代码 &#x1f44a;观察过程代码 &#x1f44a;正确代码 &#x1f44a;细节代码 来自《啊哈算法》 前言 刚学了树在优先队列中的应用--堆的实现 那么树还有哪些神奇的用法呢&#xff1f;我们从一…...

编程日记 2023/2/26 22:34:19

Flutter3引用原生播放器-IOS(Swift)篇

前言由于Flutter项目中需要使用到播放器功能&#xff0c;因此对flutter中各种播放器解决方案进行了一番研究和比对&#xff0c;最后决定还是自己通过Plugin的方法去引用原生播放器符合自己的需求&#xff0c;本篇文章会对各种解决方案做一个简单的比较&#xff0c;以及讲解一下…...

编程日记 2023/2/26 22:33:10

【蓝桥杯每日一题】双指针算法

&#x1f34e; 博客主页&#xff1a;&#x1f319;披星戴月的贾维斯 &#x1f34e; 欢迎关注&#xff1a;&#x1f44d;点赞&#x1f343;收藏&#x1f525;留言 &#x1f347;系列专栏&#xff1a;&#x1f319; 蓝桥杯 &#x1f319;我与杀戮之中绽放&#xff0c;亦如黎明的花…...

编程日记 2023/2/26 22:32:04

拼数（一般贪心）

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题号&#xff1a;NC16783 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 设有n个正整…...

编程日记 2023/2/26 22:30:57

LeetCode 热题 C++ 169. 多数元素 10. 正则表达式匹配 155. 最小栈

力扣169 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#xff1…...

编程日记 2023/2/26 22:29:51

Clickhouse学习:MergeTree

MergeTree一、MergeTree逻辑存储结构二、MergeTree物理存储结构三、总结一、MergeTree逻辑存储结构 如上图所示,在排序键(CountrID、Date)上做索引,数据会按照这两个字段先后排序ClickHouse是稀疏索引,每隔8192行做一个索引,如(a,1),(a,2),比如想查a,要读取[0,3)之间的内容,稀疏…...

编程日记 2023/2/26 22:28:45

【java基础】包装类，自动装箱和自动拆箱

文章目录基本介绍包装类自动装箱自动拆箱包装类注意事项包装类比较包装器内容不可变基本介绍 有时&#xff0c;需要将int这样的基本类型转换为对象。所有的基本类型都有一个与之对应的类。 例如&#xff0c;Integer类对应基本类型int。通常&#xff0c;这些类称为包装器&#…...

编程日记 2023/2/26 22:27:36

Android笔记(二十五)：两种sdk热更插件资源加载方案

背景 在研究sdk插件化热更新方式的过程中总结出了两套插件资源加载方案&#xff0c;在此记录下 资源热更方式 方式一&#xff1a;合并所有插件资源 需要解决资源id冲突问题 资源ID值一共4个字段&#xff0c;由三部分组成&#xff1a;PackageIdTypeIdEntryId PackageId&…...

编程日记 2023/2/26 22:26:26

spring框架--全面详解（学习笔记）

目录 1.Spring是什么 2.Spring 框架特点 3.Spring体系结构 4.Spring开发环境搭建 5.spring中IOC和DI 6.Spring中bean的生命周期 7.Spring Bean作用域 8.spring注解开发 9.Spring框架中AOP&#xff08;Aspect Oriented Programming&#xff09; 10.AOP 实现分类 11.A…...

编程日记 2023/2/26 22:25:17

2023年CDGA考试模拟题库(401-500)

2023年CDGA考试模拟题库(401-500) 401.数据管理战略的SMART原则指的是哪项? [1分] A.具体 、高质量、可操作 、现实、有时间限制 B.具体、可衡量、可检验、现实、有时间限制 C.具体、可衡量、可操作、现实、有时间限制 D.具体、高质量、可检验、现实12-24个月的目标 答…...

编程日记 2023/2/26 22:24:10

软件设计师备考文档

cpu 计算机的基本硬件系统&#xff1a;运算器、控制器、存储器、输入设备、输出设备 cpu负责获取程序指令&#xff0c;对指令进行译码并加以执行 * cpu的功能控制器&#xff08;保证程序正常执行&#xff0c;处理异常事件&#xff09; 程序控制操作控制运算器&#xff08;只能…...

编程日记 2023/2/26 22:23:03

Javascript的API基本内容（一）

一、获取DOM对象 querySelector 满足条件的第一个元素 querySelectorAll 满足条件的元素集合 返回伪数组 document.getElementById 专门获取元素类型节点&#xff0c;根据标签的 id 属性查找 二、操作元素内容 通过修改 DOM 的文本内容&#xff0c;动态改变网页的内容。 inn…...

编程日记 2023/2/26 22:21:57

10、最小公倍数

法一&#xff1a; #include <stdio.h>int main(){int a,b;scanf("%d%d",&a,&b);int m a>b?a:b;//m表示a,b之间的较大值while(1){if(m%a0&&m%b0){break;}m;}printf("%d",m);return 0; }法二&#xff1a;a*i%b0成立 #include &…...

编程日记 2023/2/26 22:20:50

【vue】vue2.x项目中使用md文件

一、Vue项目展示md文件的三种方式 1、将md文件 导入为 html 生成的标题标签自带具有id属性&#xff0c;值为标题内容&#xff1b; <h2 id"测试">测试</h2> # 处理md为html字符串 yarn add markdown-loader # 处理字符串&#xff0c;用于导出显示 yarn a…...

编程日记 2023/2/26 22:19:41

操作系统权限提升(十三)之绕过UAC提权-MSF和CS绕过UAC提权

系列文章 操作系统权限提升(十二)之绕过UAC提权-Windows UAC概述 注&#xff1a;阅读本编文章前&#xff0c;请先阅读系列文章&#xff0c;以免造成看不懂的情况&#xff01;&#xff01; MSF和CS绕过UAC提权 CS绕过UAC提权 拿到一个普通管理员的SHELL,在CS中没有*号代表有…...

编程日记 2023/2/26 22:18:34

快速排序+快速定位

快速排序算法采用了分治法以及递归作为解决问题的思想。在计算机科学中&#xff0c;分治法是一种很重要的算法。字面上的解释是“分而治之”&#xff0c;就是把一个复杂的问题分成两个或更多的相同或相似的子问题&#xff0c;再把子问题分成更小的子问题……直到最后子问题可以…...

编程日记 2023/2/26 22:17:22

nginx http rewrite module 详解

大家好&#xff0c;我是 17。 今天和大家聊聊 nginx http rewrite module 。 简单来说&#xff0c; ngx_http_rewrite_module module 用正则匹配请求&#xff0c;改写请求&#xff0c;然后做跳转。可以是内部跳转&#xff0c;也可以是外部跳转。 学习这个模块的时候&#xf…...

编程日记 2023/2/26 22:16:15

BetterGI：解放双手的终极原神自动化助手，每天节省2小时游戏时间

BetterGI&#xff1a;解放双手的终极原神自动化助手&#xff0c;每天节省2小时游戏时间 【免费下载链接】better-genshin-impact &#x1f4e6;BetterGI 更好的原神 - 自动拾取 | 自动剧情 | 全自动钓鱼(AI) | 全自动七圣召唤 | 自动伐木 | 自动刷本 | 自动采集/挖矿/锄地 | 一…...

编程新知 2026/5/12 16:26:14

从仿真卡死到波形完美：手把手调试Verilog Testbench时钟的那些坑

从仿真卡死到波形完美&#xff1a;手把手调试Verilog Testbench时钟的那些坑 数字电路仿真中&#xff0c;时钟信号就像交响乐团的指挥棒&#xff0c;一个微小的节奏错误就可能导致整个系统失序。刚接触Verilog仿真的工程师们&#xff0c;往往会在时钟生成这个看似简单的环节栽跟…...

编程新知 2026/5/12 16:17:55

文献处理效率暴跌？NotebookLM Agent的3层语义理解架构，让PDF秒变可推理知识图谱！

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;文献处理效率暴跌&#xff1f;NotebookLM Agent的3层语义理解架构&#xff0c;让PDF秒变可推理知识图谱&#xff01; 传统PDF阅读工具仅支持关键词检索与线性浏览&#xff0c;面对百页学术论文或跨领域…...

编程新知 2026/5/12 14:14:49

APK安装器终极指南：在Windows上轻松安装安卓应用的5个简单步骤

APK安装器终极指南&#xff1a;在Windows上轻松安装安卓应用的5个简单步骤 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否想在Windows电脑上直接运行安卓应用&a…...

编程新知 2026/5/12 13:54:46

企业如何通过API Key管理与审计日志加强内部AI应用管控

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 企业如何通过API Key管理与审计日志加强内部AI应用管控 对于在企业内部规模化部署大模型应用的团队而言&#xff0c;如何确保资源被…...

编程新知 2026/5/12 13:28:59

傅里叶变换加速视觉模型：频域卷积与FiT架构实战

1. 项目概述&#xff1a;用傅里叶变换为视觉模型“减负”在计算机视觉的模型炼金术里&#xff0c;我们总在追求一个看似矛盾的平衡&#xff1a;既要模型“看得更清”&#xff08;更高的精度和更强的特征提取能力&#xff09;&#xff0c;又要它“跑得更快”&#xff08;更低的计…...

编程新知 2026/5/12 12:55:27

AI编程助手成本优化：混合路由策略如何将API账单降低73%

1. 项目概述&#xff1a;当AI编程助手成为API预算的“吞金兽”如果你正在为团队开发或集成一个AI编程助手&#xff0c;并且看着每月五位数的API账单感到头皮发麻&#xff0c;这篇文章就是为你准备的。我亲眼见过不少开发团队&#xff0c;在享受着AI辅助编程带来的效率提升时&am…...

编程新知 2026/5/12 12:26:33

ExifToolGUI：如何轻松批量管理照片元数据的完整指南

ExifToolGUI&#xff1a;如何轻松批量管理照片元数据的完整指南 【免费下载链接】ExifToolGui A GUI for ExifTool 项目地址: https://gitcode.com/gh_mirrors/ex/ExifToolGui 你是否曾经面对成百上千张照片&#xff0c;想要批量修改拍摄时间、添加版权信息或调整GPS坐标…...

编程新知 2026/5/12 9:29:35

终极免费跨平台Steam创意工坊下载器：告别重复购买，轻松获取1000+游戏模组

终极免费跨平台Steam创意工坊下载器&#xff1a;告别重复购买&#xff0c;轻松获取1000游戏模组 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 你是否在Epic Games Store或GOG…...

编程新知 2026/5/12 9:22:24

茉莉花插件：终极中文文献管理解决方案，三步搞定Zotero中文文献难题

茉莉花插件&#xff1a;终极中文文献管理解决方案&#xff0c;三步搞定Zotero中文文献难题 【免费下载链接】jasminum A Zotero add-on to retrive CNKI meta data. 一个简单的Zotero 插件&#xff0c;用于识别中文元数据 项目地址: https://gitcode.com/gh_mirrors/ja/jasmi…...

编程新知 2026/5/12 8:44:11