使用场景：

在未使用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. python--第二十四天总结

    CMDB介绍 CMDB --Configuration Management Database 配置管理数据库, CMDB存储与管理企业IT架构中设备的各种配置信息,它与所有服务支持和服务交付流程都紧 ...

  2. Centos 6.5使用vsftpd配置FTP服务器教程

    Centos 6.5使用vsftpd配置FTP服务器教程什么是vsftpd vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序.特点是小巧轻快,安全易用.vsftpd 的名字代表”ver ...

  3. nginx安装与挂载

    Linux下添加新硬盘,分区及挂载 http://blog.chinaunix.net/uid-25829053-id-3067619.html vim /etc/fstab /dev vdb1  / ...

  4. Linux服务器文件和windows本机文件互传方法(本地文件上传Linux,Linux文件下载到本机）

    1.windows系统中下载XShell安装文件.下载地址:https://www.newasp.net/soft/384562.html 2.安装之后,新建会话输入远程linux的账号和密码. 3. ...

  5. requests+django+bs4实现一个web微信的功能

    前言: 今天我们利用requests模块+django+bs4浏览器来实现一个web微信的基本功能,主要实现的功能如下 a.实现返回二维码 b.实现手机扫码后二维码变成变成头像 c.实现手机点击登陆成 ...

  6. selenium之 chromedriver与chrome版本映射表（更新至v2.46）

    chromedriver版本 支持的Chrome版本 v2.46 v71-73 v2.45 v70-72 v2.44 v69-71 v2.43 v69-71 v2.42 v68-70 v2.41 v6 ...

  7. docker 删除所有none的镜像

    docker images|grep none|awk '{print $3}'|xargs docker rmi

  8. oracle12C安装步骤

    首先去官网下载两个架包链接如下:官网链接 第一步:将两个架包解压到同一个database目录下.如截图所示: 第二步:打开setup应用程序 打开后就到了下面这个页面 第三步:配置安全更新 环境变量配 ...

  9. 大白书中无向图的点双联通分量（BCC）模板的分析与理解

    对于一个无向图,如果任意两点至少存在两条点不重复(除起点和终点外无公共点)的路径,则这个图就是点双联通. 这个要求等价于任意两条边都存在于一个简单环(即同一个点不能在圈中出现两次)中,即内部无割点. ...

  10. Python第十六天 类的实例化

    首先 , 先定义一个 简单的 Person 类 class Person: head = 1 ear = 2 def eat(self): print('吃饭') 关于什么是类, 定义类, 类对象,类 ...