使用场景：

在未使用UI库时免不了会用到各种上传文件，那么默认的上传文件样式无法达到项目的要求，因此重写（修改）上传文件样式是必然的，下面的效果是最近项目中自己写的一个效果，写出来做个记录方便以后使用；

默认效果及选择文件后效果：

修改后的效果：

以下是相应的代码：

<!doctype html>

<html>

<head>

  <title></title>

</head>

<style type="text/css">

.file{

  margin-top: 20px;

  margin-left: 20px;

}

  .block {

    margin-bottom: 30px;

    margin-top: 20px;

    height: 30px;

    line-height: 30px;

  }

  .block span {

    display: inline-block;

    width: 100px;

    text-align: right;

    font-size: 14px;

    float: left;

    margin-right: 15px;

  }

  .block input {

    background: #363738;

    height: 30px;

    width: 300px;

    border: #363738;

    color: #ffffff;

    padding-left: 15px;

  }

  .block .block-label {

    width: 220px;

    height: 30px;

    background: #363738;

    margin: 0;

    float: left;

    padding-left: 15px;

    color: #fff;

  }

  /* 文件上传样式 */

  .btn_addPic {

    display: inline-block;

    position: relative;

    width: 80px;

    height: 30px;

    overflow: hidden;

    border: 1px solid #f9c100;

    background: #f9c100;

    color: #000;

    cursor: pointer;

    text-align: center;

    font-size: 14px;

  }

  .btn_addPic:hover {

    cursor: pointer;

  }

  .filePrew {

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 140px;

    height: 39px;

    font-size: 100px;

    opacity: 0;

    filter: alpha(opacity=0);

    /* 兼容IE */

  }

</style>

<body>

  <div class="file">

    <input type="file" name="" id="">

    <input type="file" name="" id="">

  </div>

  <div class="block">

    <span>CAD图纸：</span>

    <label class="block-label" for="fileupload" id="label"></label>

    <a class="btn_addPic" href="javascript:void(0);" id="fileupload">

      选择

      <input class="filePrew" type="file" accept="images/*" id="upload" onchange="getFileSize(this.value)">

    </a>

  </div>

  <script>

    var card = document.getElementById('label');

    function getFileSize(v) {

      card.innerText = v;

      console.log(v)

    }

  </script>

</body>

</html>

可直接复制粘贴查看效果！

一分积累，一份收获，愿大家每天都有进步！

input type='file'文件上传自定义样式的更多相关文章

  1. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  2. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  3. <input type="file">文件上传

    <input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...

  4. javascript input type=file 文件上传

    在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...

  5. input type="file"文件上传到后台读取

    html页面(表单采用bootStrap) js部分: //更换头像时把上传的图片post方式到控制器 <script type="text/javascript"> ...

  6. input type="file"文件上传时得到文件的本地路劲

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...

  7. 修改input file 文件上传的样式

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  8. input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  9. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

随机推荐

  1. 初学c# -- 记录QQ键盘

    扫描进程,如果QQ启动了,开始记录键盘,别的程序都不记录.记录到e:\log.txt里面,当然也可以修改为截屏+记录发送到邮箱或客户端 进程 Process[] p = Process.GetProc ...

  2. IDEA报错No Spring WebApplicationInitializer types detected on classpath

    IDEA报错No Spring WebApplicationInitializer types detected on classpath https://my.oschina.net/sprouti ...

  3. paloalto防火墙注册

    一.创建账户 1.注册网站: https://support.paloaltonetworks.com/Support/Index 2.单击 Activate My Account 3.输入 Your ...

  4. 分布式系统-主键唯一id,订单编号生成-雪花算法-SnowFlake

    分布式系统下 我们每台设备(分布式系统-独立的应用空间-或者docker环境) * SnowFlake的优点是,整体上按照时间自增排序,并且整个分布式系统内不会产生ID碰撞(由数据中心ID和机器ID作 ...

  5. Memcached和Memcache安装（64位win7）[z]

    http://www.cnblogs.com/lucky-man/p/6126667.html 一.Memcached和Memcache的区别: 网上关于Memcached和Memcache的区别的理 ...

  6. 小程序解析html(使用wxParse)

    正好遇到一个数据里面是html格式的数据,小程序不支持,网上找到这个做下记录,下面是我下好的wxParse文件目录 我的文件夹放的和pages同级 1.首先引入样式@import "/wxP ...

  7. Linux-01初级学习

    刚刚接触 Linux学习中的一点笔记`02 ps:自己学习过程中的记录,略菜,给没学过的纯小白 配置网络 1.虚拟网卡 2.虚拟机服务  我的电脑-->管理-->服务 3.修改网络配置文件 ...

  8. tcp拥塞控制 tahoe reno new reno sack

    http://www.docin.com/p-812428366.html http://www.docin.com/p-812428366.html

  9. Samtools在Linux上非root权限的安装

    第一次在Linux上不用root权限安装软件,查看了很多博客,并实践安装成功.大致总结了一下samtools的安装过程,仅供大家参考,如有不对的地方,欢迎指正~ samtools安装过程中依赖于lzm ...

  10. n的m划分 整数拆分问题

    n的m划分 将n划分成若干个不超过m的数(正整数)的和,问有几种划分情况. 现在根据n和m的关系,考虑下面几种情况: 当n=1时,不论m的值为多少,只有一种划分,即{1}: 当m=1时,不论n的值为多 ...