type=file的input的样式修改+上传后预览图片

最新推荐文章于 2023-12-17 12:43:03 发布
最新推荐文章于 2023-12-17 12:43:03 发布
阅读量719 收藏 1
点赞数 1
分类专栏： 前端基础 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50646256/article/details/110661436
版权
本文介绍了如何通过JavaScript和HTML来修改input[type=file]的样式，使其看起来更美观。通过调整层级关系使表单透明并覆盖在自定义按钮之上，实现了点击按钮实际触发文件上传。此外，还展示了如何实现在上传图片后即时预览，通过监听onchange事件读取文件路径并设置到预览元素的src属性，达到预览效果。
摘要由CSDN通过智能技术生成

前面的文章介绍过type=file的input，但是有没有发现这玩意是真的丑。
input
而且它的样式直接是修改不了的，因此需要一些巧方法来更改
1.

在这里插入图片描述
2.
在这里插入图片描述

上两个都是改过之后的效果，现在这整张图片或者下面那个按钮就是那个表单项。当然可以修改为更加高大上的，这里只是展示方法就比较简洁。

下面是方法：
先说那个简单的按钮，因为那个图片的表单项会有其他内容会在后面说。

 <input class="load_hidden video_files" name="file" type="file" value
最低0.47元/天 解锁文章
前端攻城fff
关注
专栏目录
jq多选加文件预览_jQuery实现input[type=file]多图预览上传删除等功能
weixin_34520503的博客
01-17 666
下面我们了解一下，多图上传时，怎么实现预览、上传、删除等功能。下图是功能实现的预览效果，虽然样式有点丑，不过功能还是实现了。话不多说，直接看代码会更直观一些。首先定义一下基本格式，样式代码自行脑补：点击上传接着定义看一下具体的js实现代码，我是基于JQ做的开发，方便DOM的操作。1. 预览功能的实现这里监听input[type=file]的change事件，在回调函数中，取到暂存区的文件e.tar...
解决type=file 文件修改表单 名称不能正常回显的问题
01-19
easyui 框架下   代码如下： css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32px; line-height: 35px; padding-left: 10px; margin-right: 25px; } .file{ float: right; outline: none; border:none; background: #67BEF4; border-radius: 4px; padding: 4px 12px; cursor:pointer; color: #fff
input标签file 上传头像，在线预览功能
衣乌安、随笔
08-27 1388
首先需要了解一下FileReader对象：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 事件： FileReader.onabort 处理　abort　事件。该事件在读取操作被中断时触发。 FileReader.onerror 处理 error 事件。该事件在读取操作发生错误时触发。 FileReader.onl...
纯CSS定义input file样式及上传图片预览 CSS
龚清林的博客
09-11 5421
<style type="text/css"> .upfile{cursor:pointer;direction:rtl;height:30px;opacity:0;width:90px;filter:alpha(opacity=0); position:absolute;top:0;left:0} a{ position:relative;cursor:pointe
input file详细介绍
最新发布
sunqinshan的博客
12-17 4411
input file详细介绍
input file 选择图片并显示
Web前端工程师
03-27 3584
<!doctype html> <html> <head> <meta charset="utf-8"> <title>选择图片并显示</title> </head> <body> <div id="pic_list"> <input type="file" name="files...
jQuery实现input[type=file]多图预览上传删除等功能
12-29
下面我们了解一下，多图上传时...input id=upload type=file accept=image/* multiple=multiple> <button class=btn>点击上传</button> <div class=img-box> <!-- 存放预览图片 --> </div>
input type=file 选择图片并且实现预览效果的实例
08-29
input type=file 选择图片并且实现预览效果的实例 本文将为大家带来一个input type=file 选择图片并且实现预览效果的实例。这个实例使用了HTML、CSS和JavaScript来实现图片上传和预览的功能。 首先，让我们看看...
javascript实现input file上传图片预览效果
11-23
5. 实现删除预览图片的功能，隐藏或移除相关元素。 以上就是利用JavaScript实现input file上传图片预览效果的详细过程，这个功能在许多网站的图片上传功能中非常常见，能给用户带来更好的交互体验。
css input[type=file] 样式美化(input上传文件样式 )
09-24
主要介绍了css input[type=file] 样式美化(input上传文件样式 )的相关资料,需要的朋友可以参考下
html typefile 样式,type="file"的input框样式修改的方法
weixin_42393576的博客
06-19 835
关于type="file"的input是啥？这个是啥我觉得没必要再说了，反正大家都知道，然后在现在有各种手机的时代，还可以通过直接拍照的方式来上传，反正比以前好玩多了。上传按钮的样式调整玩过CSS的人朋友都知道，在HTML元素中，表单控件元素的样式修改是最痛苦的，很多控件的样式是跟着系统主题来改变的，想要去修改的话，只能模拟来实现，尤其尤其是在IE浏览器中。对于type="file"这个上传按钮，...
HTML5中使用type=file的input上传文件权威指南
kouryoushine的博客
11-05 2155
HTML5中使用type=file的input上传文件权威指南 一 、入门 下面是大家非常熟悉的html5的文件上传代码，可不保证每个人都真的理解背后的知识点。 <input type="file" id="input"> 当我们点击file标签的时候一定会弹出文件选择的界面，当我们选择一个图片或者文件时，浏览器dom中会产生一个fileList对象。 通过DOM API我们可以访问...
input type=file选择图片按钮样式修改与图片预览
weixin_42230222的博客
08-19 3218
1 背景 通过上图我们可以看到input=file按钮的默认样式，的确不怎么好看，如果要自定义按钮的样式，该如何实现呢？ 2 方式1样式 input覆盖整个按钮区域，并且设置完全透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
移动端 input type=‘file‘ 自定义样式、多图表单上传 及 踩坑 大总结
巫小婆的博客园~
07-16 881
实现效果如下图： 具体代码实现 如下： setEvaluation.vue(仅包括图片列表展示 及 自定义上传按钮): <div class="eva_uploadImg"> <div class="eva_loadImgList"> <ul class="clearfix"> <li class="fl eva_myImg" v-for="(item,index) in imgDatas" :key="index" >
html中某个名称不能修改,type=file 文件修改表单 名称不能正常回显的问题
weixin_39807541的博客
06-03 126
easyui 框架下 代码如下：css:.file_box{float: right;width: 1035px;border: 1px solid #999;height: 32px;line-height: 35px;padding-left: 10px;margin-right: 25px;}.file{float: right;outline: none;border:none;bac...
修改input[type="file"]文件上传样式的2种方法
02-08 6790
问题说明 一般input[type=”file”]都不会采用默认样式，因此需要将真正起作用的隐藏掉，显示一个设计出的按钮样式。隐藏的方法有2种，一种是visibility:hidden，一种是opacity:0。visibility:hidden会给元素留有位置，但是通过点击无法触发事件。一般按钮上划上去时要添加cursor:pointer，但是在input[type=”file”]默认按钮上不...
input[type="file"]样式修改
热门推荐
feinifi的博客
01-30 2万+
默认情况下，html中的&lt;input type="file"/&gt;标签展示的效果是自带的，为了美观和体验，我们需要对他进行一番修饰，让他看起来，更加的优雅。修饰的思路是，让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让input的父级元素相对定位，然后让input元素绝对定位，并且可见度为0，就是看不见，但是点击也能出现选择文件的效果，input元素...
HTML file 图片回显
01-18 949
html代码： <span class="devImgClick"><img id="devImgShow" src="images/main/autor.png"></span> <input id="devImg" type="file" accept="image/*" name="devImg" onchange="showPic();" style="display: none"/> js代码： 通过控件的on.
jQuery与input[type=file]实现多图片上传与实时预览
首先，作者提到默认的`<input type="file">`样式较为简单，因此建议对其进行美化，例如使用CSS创建一个名为`uploadImgBtn`的容器，包含一个透明的`<input>`元素，用户可以通过这个按钮选择图片。 CSS样式部分，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值