使用场景：

在未使用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. OOP的五大原则

    一:单一职责原则. 含义一方面是避免相同的职责分散到不同的类中:另一方面避免一个类承担太多职责. 二:接口隔离原则. 一个类对另一个类的依赖性应当建立在最小的接口上的. 就是定制化服务设计的原则. 三 ...

  2. Windows Server 2012 R2 双网卡绑定

    双网卡绑定主要有以下两点好处: 1.实现网络容错:主主模式和主被模式 2.带宽聚合 首先准备工作需要两台虚拟机,Server01是目标服务器,需要有两块网卡,并且清空两块网卡的现有配置,Server0 ...

  3. Spring--基础介绍一：IOC和DI

    前面学习了Struts2和Hibernate. Struts2主要是用来控制业务层面逻辑和显示,告诉你什么时候走哪个action,跑去运行哪个class的什么方法,后面调到哪个jsp. Struts2 ...

  4. vue如何使用rules对表单字段进行校验

    基于element-ui 1.在代码中,添加属性::rule <el-form :model="form" :rules="rules" ref=&quo ...

  5. Bar 柱状图

    1.生成基本图形 向上向下分别生成12个数据,X为 0 到 11 的整数 ,Y是相应的均匀分布的随机数据. 使用的函数是plt.bar,参数为X和Y: import matplotlib.pyplot ...

  6. propertychange事件导致的IE浏览器堆栈溢出

    前段事件做项目,在IE下测试时,发现会报堆栈溢出的错误,其他浏览器正常,于是开始了苦逼的IE查错路程... 由于是在操作了某个输入框之后才出现的错误,所以把重点放到了input的相关事件,最终发现是这 ...

  7. 20170506计划-----(基于python查询oracle语句)

    在日常的工作中,经常接到开发同事查询生产SQL的请求,公司又不允许对开发开放查询SQL的权限,并且查询的堡垒机又很慢,计划做一个可以自动查询SQL的小工具,一周内完成吧. 大概功能实现了,一些涉及敏感 ...

  8. [精华][推荐] CAS SSO单点登录环境搭建及实例

    1.因为是本地模拟sso环境,而sso的环境测试需要域名,所以需要虚拟几个域名出来,步骤如下: 2.进入目录C:\Windows\System32\drivers\etc 3.修改hosts文件 12 ...

  9. 内核中hash表（以net_device为例）

    下边函数实现将新的 net_device 设备插入到内核链表中 /* * Device list insertion */ static void list_netdevice(struct net_ ...

  10. Android学习（三）

    学号 20189214 <Android程序开发>第八周学习总结 教材学习内容总结 GridView GridView和ListView一样是AbsListView的子类; 都需要一个Ad ...