实现思路:

  1. a标签包裹input元素
  2. 设置a标签为上传按钮的样式,相对定位
  3. 设置input为透明,绝对定位,覆盖到a上面

效果:看到的按钮是a的样式,点击时实际是点击input元素。样式和功能都具备

html代码:

<a href="javascript:;" class="file gradient">选择文件 
  <input type="file" >
</a>

CSS代码:

.file {
position: relative;
display: inline-block;
background: #ccc;
border: 1px solid #333;
padding: 4px 20px;
overflow: hidden;
text-decoration: none;
text-indent:;
line-height: 20px;
border-radius: 20px;
color: #333;
font-size: 13px; }
.file input {
position: absolute;
font-size: 100px;
right:;
top:;
opacity:;
}
.gradient{

    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);/*IE8*/
background:#ccc; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, #fff, #ccc);
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));
background:-o-linear-gradient(top, #fff, #ccc);
}

效果:

此时上传文件的文件名不显示,需要用js处理:

$(".file").on("change","input[type='file']",function(){
var filePath=$(this).val();
if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
$(".fileerrorTip1").html("").hide();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
$(".showFileName1").html(fileName);
}else{
$(".showFileName1").html("");
$(".fileerrorTip1").html("您未上传文件,或者您上传文件类型有误!").show();
return false
}
})

效果:

input(file)样式修改及上传文件名显示的更多相关文章

  1. input[tyle="file"]样式修改及上传文件名显示

    默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...

  2. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  3. input file美化,文件上传

    此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...

  4. h5 input file ajax实现文件上传

    <input type="file" accept="image/*" height="0" class="file_inp ...

  5. input file实现多次上传文件(不会覆盖上次上传的文件)

    html原生的file多选控件:<input class="className" type="file" name="name" ac ...

  6. input file控件限制上传文件类型

    网页上添加一个input file HTML控件: <input id="File1" type="file" /> 默认是这样的,所有文件类型都会 ...

  7. input.file样式修改

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML5中的input type为file控件限制上传文件类型及扩展

    简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...

  9. salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

    在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...

随机推荐

  1. 操作系统IO模型

    操作系统IO模型 声明:如下内容是根据APUE和mycat两本著作中关于I/O模式的一些内容加上自己的一些理解整理而成,仅供学习使用. 本节内容 UNIX下可用的五种I/O模型 三种I/O模型 Rea ...

  2. LinkedIn的即时消息:在一台机器上支持几十万条长连接

    最近我们介绍了LinkedIn的即时通信,最后提到了分型指标和读回复.为了实现这些功能,我们需要有办法通过长连接来把数据从服务器端推送到手机或网页客户端,而不是许多当代应用所采取的标准的请求-响应模式 ...

  3. NOI2018准备Day13晚

    今晚很困.很困,看题解做了一道钻石级的题,数独发生了神奇的错误,=_=

  4. 1122从业务优化MYSQL

    http://blog.itpub.net/22664653/viewspace-2079576/ 开发反馈一个表的数据大小已经130G,对物理存储空间有影响,且不容易做数据库ddl变更.咨询了开发相 ...

  5. 线段树 HDU 3397

    5种操作 具体看代码 #include<iostream> #include<stdio.h> #include<string.h> #include<alg ...

  6. ubuntu下配置vpn

    Ubuntu系统下搭建VPN环境 以下是基于Amazon EC2/Ubuntu搭建PPTPD服务提供VPN连接的过程记录.至于为什么要搞VPN,大家都懂的...而我主要是要访问Python的一些网站以 ...

  7. Delphi 实现数字转大写

    从网上找的一段代码 /// <summary> /// 小写转大写 /// </summary> /// <param name="mmje"> ...

  8. Linux 常用操作命令

    基本操作 显示 查看 查找 定时任务 打包压缩 grep sed awk 正则

  9. IndentationError: unindent does not match any outer indentation level

    [problem] 从别处copy过来的python代码经过自己改动后,运行出错 [解决过程] vim file :set list  # cat -A file 也可以 可以看到9-12行的inde ...

  10. 团队博客作业- Week3

    成员介绍 韩青长  测试 我是韩青长,技术小白,抱着对软工的好奇和对未来工作的憧憬选了这门课.暂时选择了测试的工作,也对开发和UI有一定兴趣.从前上帝创造了我们,现在轮到我们来创造自己的软件了~ 陈彦 ...