input美化上传按钮美化

本文介绍如何使用CSS和JavaScript美化HTML上传按钮的样式,并实现上传文件名的截取功能,仅显示文件名部分。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天工作需求碰到 样式改变上传按钮

效果:

<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="">点击这里上传文件
</a>
 1 <style type="text/css">
 2     .a-upload {
 3         padding: 4px 10px;
 4         height: 20px;
 5         line-height: 20px;
 6         position: relative;
 7         /*相对定位*/
 8         cursor: pointer;
 9         color: #888;
10         background: #fafafa;
11         border: 1px solid #ddd;
12         border-radius: 4px;
13         overflow: hidden;
14         display: inline-block;
15         /*显示一排*/
16         *display: inline;
17         *zoom: 1
18     }
19     
20     .a-upload input {
21         position: absolute;
22         font-size: 100px;
23         right: 0;
24         top: 0;
25         opacity: 0;
26         filter: alpha(opacity=0);
27         cursor: pointer
28     }
29     
30     .a-upload:hover {
31         color: #444;
32         background: #eee;
33         border-color: #ccc;
34         text-decoration: none
35     }
36         </style>

附带小功能:截取上传文件名:

 

 1     <script type="text/javascript">
 2                  $(document).ready(function(){
 3                       var  src ="";
 4                      $(".a-upload").on("change","input[type='file']",function(){
 5                          src = $(this).val();
 6                         console.log(src);
 7                         if (src.indexOf("jpg") != -1 || src.indexOf("png") != -1 ) {
 8                                $(".filetext").html("").hide();
 9                                var arr = src.split("\\");
10                                var filename = arr[arr.length-1];
11                                var  name = filename.split(".");
12                                var  lastname =  name[0];
13                                $(".showfileName").html(lastname);
14                         }else{
15                                   $(".showfileName").html("");
16                                    $(".filetext").html("宁未上传文件,或者宁上传的文件类型有误")
17                         }
18                      })
19                  
20                  })
21         </script>

 

 

转载于:https://www.cnblogs.com/h5monkey/p/5919714.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值