使用场景：

在未使用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. CancellationTokenSource 和 CancellationToken 取消线程

    Main 程序[分别调用三个方法] static void Main(string[] args) { using (CancellationTokenSource cts = new Cancell ...

  2. Linux - Ubuntu 图形界面入门

    Ubuntu 图形界面入门 目标 熟悉 Ubuntu 图形界面的基本使用 01. Ubuntu 的任务栏 02. 窗口操作按钮 03. 窗口菜单条 ——本文源自<黑马程序员>

  3. pythond的icmp广播报获取局域网主机IP

    icmp广播报获取局域网四川特产IP from scapy.all import *import randomimport threading def scan(sip,dip): pkt = Eth ...

  4. MMU二级页表

    https://blog.csdn.net/forDreamYue/article/details/78887035

  5. L2-026 小字辈(dfs)

    本题给定一个庞大家族的家谱,要请你给出最小一辈的名单. 输入格式: 输入在第一行给出家族人口总数 N(不超过 100 000 的正整数) —— 简单起见,我们把家族成员从 1 到 N 编号.随后第二行 ...

  6. OJ题解记录计划

    容错声明: ①题目选自https://acm.ecnu.edu.cn/,不再检查题目删改情况 ②所有代码仅代表个人AC提交,不保证解法无误 E0001  A+B Problem First AC: 2 ...

  7. 【深度好文】多线程之WaitHandle-->派生EventWaitHandle事件构造-》AutoResetEvent、ManualResetEvent

    AutoResetEvent/ManualResetEvent 都是继承自 EventWaitHandle ,EventWaitHandle继承自WaitHandle. 在讨论这个问题之前,我们先了解 ...

  8. Git实际操作

    1.基本操作 git init 初始化仓库 git status 查看仓库状态 git add XXX.XX 向暂存区中添加文件XXX.XX git commit 保存仓库的历史记录 git log ...

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

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

  10. Linux 学习笔记 2：文件系统

    1.文件系统层次结构 系统目录内容: /: 根目录(之后的/都是目录分隔符) /home:用户目录 /bin: Unix常用命令,如bash, date, cat, tar等 /sbin: 管理员命令 ...