css实现上传文件,file按钮用图片显示
来源:互联网 发布:荷塘月色淘宝论坛网址 编辑:程序博客网 时间:2024/05/19 14:01
在做项目的时候,要做这样的效果:上传文件的时候,file按钮用图片显示。怎么做呢?很纠结。上网查了很多资料,发现都是用js或其他语言实现的。代码很复杂,语言基础不好的人,根本都不了解,不知道什么意思。所以基本上都没有用,然后想了很久,发现css就可以简单实现。
思路如下:父标签里包含input=“file”,img。其中input的透明度为0,img绝对定位在上边。
先发一下效果吧,各大浏览器都兼容哦!
效果图:
点击前:
点击后:
点击这个图片,就可以实现上传效果。说下代码吧!
只要css和html代码哦!
css:
div,input,img{margin:0;padding:0;font-size:12px;}
.filt_box{position:relative;width:90px;height:60px;overflow:hidden;cursor:pointer;}
.filt_box img{position:absolute;left:0;top:0;}
.filt_box input{width:90px;height:60px;display:block;position:absolute;left:0;top:0;z-index:10;filter:alpha(opacity=0);moz-opacity:0;opacity:0;}
html:
<div class="filt_box">
<img src="images/200810251555_btn.gif"/>
<input type="file"/>
</div>
- css实现上传文件,file按钮用图片显示
- css实现上传文件,file按钮用图片显示
- 通过file按钮上传的图片如何显示出来 FileReader
- 用按钮替换file文件上传效果
- 文件上传按钮样式美化,显示图片路径
- input file文件上传CSS模拟为 选择 加 上传 两个按钮
- 上传图片时实现图片预览或上传文件时用label显示文件名
- 【CSS】自定义上传文件按钮
- 如何用js和css美化input file 按钮,并且显示上传的文件名
- jquery html5 file 上传图片显示图片
- 用FileUpload实现文件上传2-限制只上传图片并显示
- css伪装选择图片上传按钮
- 上传文件file按钮的美化处理
- js file上传图片并显示出来
- 使用input file 上传图片并显示
- 点击按钮实现文件上传
- AFNetWorking文件上传Data File图片 文件.
- 上传文件 隐藏input type="file",用text显示
- QGraphicsItem子类对象间消息的传递与获取
- QT对话框显示中文文件名
- Problem32
- GCC 参数
- 大数相加
- css实现上传文件,file按钮用图片显示
- asp.net gridview导出Excel、World文档
- 开启177端口
- Git Magic --- Git入门书籍
- 关于c语言中_restrict
- 关于引用类型的成员变量
- MessageBox
- DataSet导出Excel
- Oracle系统中为释放资源kill session的小结