html+css实现自定义图片上传按钮

普通的input[type=‘file’]的效果很朴素

可以自定义一个file选择文件的按钮：

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

思路为：
用定位将自定义的按钮遮住原来的选择文件按钮，
再让点击自定义按钮时触发原来的选择文件按钮的事件即可
（对此，label可实现）
效果图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.btn{position: relative;display: inline-block;width: 75px;height: 25px;overflow: hidden;text-align: center;font-size: 14px;line-height: 25px;vertical-align: center;border: 1px solid #23c6c8;background-color: #23c6c8;color:#fff;border-radius: 3px;}.btn:hover{border: 1px solid #23babc;background-color: #23babc;}.btn input{position: absolute;top:0;left: 0;opacity: 0;}</style>
</head>
<body><label type="button" class="btn"><span>选择图片</span><input type="file"></label>
</body>
</html>

html+css实现自定义图片上传按钮相关推荐

CSS自定义文件上传按钮
原文:CSS自定义文件上传按钮今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: ...
vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ck ...
quill自定义图片上传
quill是个不错的富文本编辑器,但是它的图片上传是直接将本地图片读成base64跟文本混合在一起,这显然不适合一般开发需求,我们希望插入的是一个图片url,故这里将基于vue.js实现quill的图 ...
vue2 + tinymce 包含自定义图片上传及视频、音频上传
安装安装时需要注意一个问题,两个包如果不适用会出现报错情况且无法使用,我这边使用的是当前这两个版本 npm install @tinymce/tinymce-vue@3.2.8 -S npm ins ...
wangEditor自定义上传图片上传按钮，适合各种JS或者后端上传
wangEditor是一款优秀的国产编辑器. 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 但是自身带的图片上传在上传七牛云可能存在版本问题.还有如果是其他云的JS上传 ...
uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理
前言本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖上图片环境 "axios": "^0.21.1", "element-ui& ...
富文本编辑器quill-editor自定义图片上传
目录 1.页面引入 2.自定义imge处理的图片上传组件 3.图片上传成功后回显嵌入 4.最终呈现效果 5.源码之前我整理过一篇文章,Quill编辑器实现图片上传功能(戳链接可查看) 但是想来那个是 ...
jeecg uedit 自定义图片上传路径
jeecg uedit 图片上传配置自定义物理路径,简单描述:我们知道 jeecg 中使用的 uedit 默认图片上传路径为 "当前项目\plug-in\ueditor\jsp\upload ...
android 自定义图片上传,android自定义ImageView仿图片上传示例
看下效果图主要看下自定义view 代码 public class ProcessImageView extends ImageView{ private Context context; priva ...
android 自定义图片上传,android自定义ImageView仿图片上传(示例代码)
Activity代码 1 public classMainActivity extends AppCompatActivity {2 ProcessImageView processImage ...

html+css实现自定义图片上传按钮

html+css实现自定义图片上传按钮相关推荐

最新文章

热门文章