给上传文件的input控件"美容"
作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。刚好菜鸟我最近工作中也遇到了这个问题。解决以后想着人生在于总结。于是乎就把这个简单的demo记录下来。
html代码
<form action=""method="post"enctype="multipart/form-data">
<a href="#" class="a-upload"><input type="file" name="file" id="file">点击这里上传图片</a> </form>
css代码
.a-upload {
padding: 4px 10px;
width: 200px;
height: 30px;
box-sizing: border-box;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1;
top: 5px;
} .a-upload input {
position: absolute;
font-size: 100px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
width: 200px;
height: 30px;
left: 0;
top: 0;
} .a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
结果
给上传文件的input控件"美容"的更多相关文章
- 给上传文件的input控件“美容”
在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮. demo: html代码 <b ...
- JS ajaxfileUpload 一次性上传多个input控件 上传多个文件
本方法适用于一次性上传多个input框输入的文件,如下图所示,任务是需要一次上传两个input框提供的两个文件. 具体方法: 1.修改ajax调用方法 如上图所示,只需要将ajaxFileUpload ...
- yii上传图片、yii上传文件、yii控件activeFileField使用
yii框架提供了activeFileField控件来完成上传文件(当然也包括了上传图片)的操作,下面介绍yii的activeFileField使用方法.1.函数原型:public static str ...
- 上传文件 隐藏input type="file",用text显示
<div> <span>上传文件:</span> <input type="file" id="upload_file" ...
- FormData上传文件(input file)
<div> <input type="file" name="FileUpload" id="FileUpload" va ...
- Ajax 上传文件(input file FormData)
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...
- 上传文件的input问题以及FormData特性
1.input中除了type="file"还要加上name="file",否则$_FILES为空,input的name值就是为了区分每一个input的 2.va ...
- 《手把手教你》系列技巧篇(五十四)-java+ selenium自动化测试-上传文件-中篇(详细教程)
1.简介 在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等.所以宏哥打算按上传文件的分类对其进行一下讲解和分享. 2.为什么selenium没有提供 ...
- 《手把手教你》系列技巧篇(五十三)-java+ selenium自动化测试-上传文件-上篇(详细教程)
1.简介 在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等.所以宏哥打算按上传文件的分类对其进行一下讲解和分享. 2.为什么selenium没有提供 ...
随机推荐
- canvas的使用
1.概念 canvas一般就是用来绘制图像的 2.基本知识 上下文对象 var canvas = doucment.getElementById("canvas") ...
- Jdom读取XML文件
学习Spring时,我们经常看到很多xml配置文件,Spring通过在配置文件中的配置,使用IOC(控制反转),从而实现代码的灵活性,本篇我就为大家介绍一种解析xml方式--Jdom 首先我们到Jdo ...
- golang http server分析(一)
http:http请求过程实质上是一个tcp连接通信,具体通过socket接口编码实现 在go中是通过listenAndServer()方法对外提供了一个http服务,在该方法中完成了socket的通 ...
- 为什么你应该抛弃Express的视图渲染引擎
Nodejs Express框架的一个被人们广为使用的特性是它的渲染引擎.Express视图渲染引擎允许Controller提供一个视图名称和视图模型对象给Express,然后返回由HTTP响应流输出 ...
- Linux系统date命令的参数及获取时间戳的方法
date指令相关用法示例 date 用法: date [OPTION]... [+FORMAT]date [-u|--utc|--universal] [MMDDhhmm[[CC]YY][.ss]] ...
- 如何在Ubuntu_16_04下使用MySql的GR
一.前言 该文章主要是记录下从一个纯净的系统开始如何安装MySql 5.7.17 并且使用GR,以便于自己后期查看以及分享给他人. 二.安装mysql 因为默认ubuntu的源并不是最新的mysql所 ...
- SERVLET中的doGet与doPost两个方法之间的区别
get和post是http协议的两种方法,另外还有head, delete等 这两种方法有本质的区别,get只有一个流,参数附加在url后,大小个数有严格限制且只能是字符串.post的参数是通过另外的 ...
- 【转】HTML5 本地存储五种方案
1.LocalStorage LocalStorage就是Key-Value的简单键值对存储结构,Web Storage除了localStorage的持久性存储外,还 有针对本次回话的sessionS ...
- MYSQL数据库导入大数据量sql文件失败的解决方案
1.在讨论这个问题之前首先介绍一下什么是"大数据量sql文件". 导出sql文件.选择数据库-----右击选择"转储SQL文件"-----选择"结构和 ...
- 免费视频播放器videojs中文教程
Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 ...