使用场景：

在未使用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. 通过.ibd和.frm恢复mysql数据

    背景:因为机器损坏,数据库的索引文件什么的都损坏了.只留下了一个mysql的data目录… 此方法恢复数据的前提:建表用的innodb索引   备注:如果mysql的目录还都在,可以先尝试,将mysq ...

  2. Linux - 系统信息相关命令

    系统信息相关命令 本节内容主要是为了方便通过远程终端维护服务器时,查看服务器上当前 系统日期和时间 / 磁盘空间占用情况 / 程序执行情况 本小结学习的终端命令基本都是查询命令,通过这些命令对系统资源 ...

  3. freeswitch dialplan 基础

    freeswitch dialplan 基础 一.基础概念 dialplan 拨号方案 context 拨号表(块) extension  拨号去向 action  (拨号后执行的)动作 condit ...

  4. PDO查询语句结果中文乱码

    PDO::MYSQL_ATTR_INIT_COMMAND (整数)连接到MySQL服务器时执行的命令.重新连接时会自动重新执行.请注意,此常量只能driver_options 在构建新的数据库句柄时在 ...

  5. 关于textarea标签自己遇到的问题

    效果描述: 固定文本框的宽高,让文本框不被拖拽,让提示内容的文字垂直居中 html: <div> <label>活动详情</label> <textarea ...

  6. iOS获取崩溃日志

    重要提示:  此文档不再更新.有关Apple SDK的最新信息,请访问文档网站. 来源: https://developer.apple.com/library/archive/qa/qa1747/_ ...

  7. iOS.mach_msg_trap()

    mach_msg_trap() 1. mach_msg() mach_msg_trap() " > The Debugger window shows the calling stac ...

  8. impala操作hase、hive

    impala中使用复杂类型(Hive):    如果Hive中创建的表带有复杂类型(array,struct,map),且储存格式(stored as textfile)为text或者默认,那么在im ...

  9. Django ORM 常用字段和参数

    Django ORM 常用字段和参数 一:常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列. I ...

  10. Codeforces 524 解题报告

    打的很快乐的一次比赛hiahiahia, 才A掉4题rating就涨了100+ 距离比赛\(3\)天了, 由于博主实在太颓, 又补掉了\(E\)题, 到现在才发解题报告 A. 语法题, 读入输出就行了 ...