如何用js和css美化input file 按钮，并且显示上传的文件名

最新推荐文章于 2021-09-02 16:03:16 发布
最新推荐文章于 2021-09-02 16:03:16 发布
阅读量2.6k 收藏
点赞数

一开始查的时候，教程里都是用图片放在按钮的下层，然后隐藏按钮

这是个很机智的做法。。。。

不过就没有显示上传的文件名的功能了

http://stackoverflow.com/questions/572768/styling-an-input-type-file-button

这个链接算是给出了完美的答案

继续完成自己的样式修改，完成了再把自己的代码贴上来

AkiHellobee
关注
css input[type=file] input[type=radio] input[type=checkbox]样式美化，input上传按钮美化
zhouweixue_vivi的博客
10-26 1078
一、css input[type=file] 样式美化，input上传按钮美化 我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢 思路： input file上传按钮的美化思路是，将input file从页面隐藏掉，然后使用div加button等元素模拟文件上传的选择框，最后使用js触发input file的点击事件 代码如下： DOM结构：
html 美化input file,Input[type=”file”] 显示效果美化方法 | 智慧宫
weixin_39638048的博客
06-10 805
Html中input可以作为上传图片代码如下但是演示非常不好看，下面做一番美化处理，效果如下：文件上传美化前后对比美化方法隐藏 input 标签使用 label 标签在input标签位置显示；用js获取 input 中上传的文件名称，并在 lable 标签中显示input[type=”file”] 美化之 Html/*** input 文件上传 Html** @author 智慧宫* @link ...
上传按钮美化
09-29
上传按钮美化，可以点击图片实现上传，类似于微博的上传图片按钮
jQuery上传文件按钮美化
weixin_30764137的博客
05-30 730
效果图如下： 思路： 1：打开文件设置为透明，外面包一层标签，给标签设置颜色背景，给人点击浏览其实是点击打开文件的错觉。（给外标签相对定位，打开文件标签绝对定位）。 2：点击浏览后，选择了文件，就把文件名赋值给前面自己创建的input框里面，前面的input框自己单独写出来。给样式。 3：上传按钮既上传文件到服务器的操作，请求接口即可。 代码： css： .cho...
input file 的美化
Fighting_xr的博客
03-27 2638
原文链接：Styling & Customizing File Inputs the Smart Way（作者：Osvaldas Valutis） 这份教程主要介绍如何将与配合、以保持语义化+可访问性为目标辅以少量Javascript来美化。 实例 网上流传过一些“自定义”元素的方法，试验过但都实现不了像Readerrr上那种上传文件即时显示到内容流里的效果。兴许最烂
input上传按钮美化
故事说到这里
02-02 1095
按钮的美化  来自 ---http://www.haorooms.com/post/css_input_uploadmh<a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a> <a h
读取input:file的路径并显示本地图片的方法
09-05
在网页开发中，`<input type="file">` 是一个常见的文件上传控件，它允许用户选择本地的文件，如图片。然而，由于安全原因，现代浏览器并不直接提供所选文件的完整路径，而是返回一个相对安全的文件名或者一个沙箱内...
原生上传文件 input上传文件及回显文件名
LickDog的博客
01-22 3267
html <div style='display:flex;'> <div class='uploadIcon'> <input class="uploadImg" type="file" id="file" multiple="multiple" onchange="handleFile('file','fileSub')"/> </div> <ul class='fileSub'> <li>暂无上传文件</li&gt
点击按钮触发file标签并把文件名显示在文本框
weixin_44548147的博客
06-09 2485
（作者：ヤ青春ゞ滋味，撰写时间：2019年6月9日） 下面我们来讲一下，当我们点击浏览的按钮的时候，我们需要它触发file弹出文件选择框后，我们需要它选择了文件之后，把我选择中的文件名称，给回填到我的另一个input标签里。 下面是我的HTML代码： 这样我们已经把HTML代码给完成了。 那么下一步就是Jquery方法。我们需要分析一下思路，因为我们需要的是当我们点击按钮的时候才...
input file选择文件之后自动上传（样式自定义美化）
09-01
自动上传文件，样式美化，input file选择文件之后自动上传（样式自定义美化），$.ajaxFileUpload自动上传文件。不会包教会。你值得拥有！
input上传文件美化
12-22
input标签type="file"，上传文件样式美化。 上传完毕显示文件名。
fileinput.css
12-13
用于bootstrap批量上传和下载的js文件，挺好用的，封装的很好
文件上传input file简便美化方案(css)
09-25
件上传input在各个浏览器里表现形式都不一样,这里通过css样式控制，尽量在多浏览器中的表现都一样
css input上传按钮美化
json_li的博客
11-21 3351
css input[type=file] 样式美化，input上传按钮美化 我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？同理：input checkbox美化，input radio美化是一个道理的，后面文章会总结。 DOM结构： href="javascript:;" class="a-upload"> type="fil
关于input type = "file" 样式的美化
llz199607的博客
09-17 3714
首先，&lt;input type = "file"&gt;的默认样式是这样的： 默认の样式   默认的样式直接放到网页中总觉得不太协调，于是我在网上查找它的美化方法。大方向上基本是用CSS美化，但细化到具体的美化方式则多种多样。在眼花缭乱之下找到了这篇文章：修改 input type=file 的样式的最简单方法 什么？最简单方法？我来看一看你有多简单。 以下是作者的思路： 1、...
原生js实现--input[file]控件样式太丑？不用担心
midneak的博客
05-31 1242
话不多说先上图样式好看与否先不管，主要说思路。今天有人也刚好问我这个问题，我就简单的用原生实现了一下思路：由于file控件样式很丑（丑到爆，在safari浏览器里还勉强），所以我们若想根据自己的设计样式来展现的话，那么就要做一点点小小的手脚，就是将file控件的功能保留，但是样式去除，那么首先想到的就是用opacity属性将其完全透明，然后我们再定位一个一模一样的input放在它的下边就ok了！一...
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
热门推荐
AC_Surprise的博客
09-02 1万+
介绍 input 全部类型 input 框的类型到底有多少种呢，零零散散算下来有二十多种 总述 常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 另外还有一些类型：tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。 text
前端css+js实现自定义上传文件/图片按钮，并显示已选文件/图片名称
遇见小美好
07-23 5466
默认的文件上传按钮样式（如下图）确实不太好看，想展现得美观一些就自己写一个样式吧。 下面我们做一个自定义的上传按钮效果，上传后把已上传文件/图片名称也显示出来。 实现思路也很简单： 1、先把原元素隐藏起来，自己写一个好看的按钮 2、点击自定义按钮时触发原元素点击事件达到选择文件上传的效果（等同于触发了原input元素 ） 最终效果如下图： 一、html部分代码： <div> ...
<input type="file" name="feedbackFile" id="feedbackFile">怎么做美化，并且可以显示文件名
最新发布
06-09
您可以通过以下方式美化上传文件的 input 元素，并显示上传的文件名： 1. 隐藏默认样式的 input 元素 ```css input[type="file"] { display: none; } ``` 2. 使用样式更好看的 label 元素代替 input 元素 ```html <label for="feedbackFile" class="file-label"> <i class="fa fa-upload"></i> 选择文件 </label> <input type="file" name="feedbackFile" id="feedbackFile"> ``` 3. 监听文件选择事件，获取文件名并显示 ```javascript var fileInput = document.getElementById('feedbackFile'); var fileLabel = document.querySelector('.file-label'); fileInput.addEventListener('change', function() { var fileName = this.value.split('\\').pop(); // 获取文件名，去掉路径 fileLabel.innerText = fileName || '选择文件'; // 如果没有选择文件，则显示默认文本 }); ``` 4. 美化 label 元素的样式 ```css .file-label { display: inline-block; padding: 10px; color: #fff; background: #007bff; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .file-label:hover { background: #0062cc; } .fa-upload { margin-right: 5px; } ``` 这样，您就可以美化上传文件的 input 元素，并在用户选择文件后显示文件名了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值