自定义上传按钮美化上传按钮input type=file (完整) 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>美化上传按钮</title>
 6     <style>
 7         .a-upload {
 8             padding: 4px 10px;
 9             height: 20px;
10             line-height: 20px;
11             position: relative;
12             cursor: pointer;
13             color: #888;
14             background: #fafafa;
15             border: 1px solid #ddd;
16             border-radius: 4px;
17             overflow: hidden;
18             text-decoration: none;
19             display: inline-block;
20             *display: inline;
21             *zoom: 1
22         }
23         .a-upload  input {
24             position: absolute;
25             font-size: 100px;
26             right: 0;
27             top: 0;
28             opacity: 0;
29             filter: alpha(opacity=0);
30             cursor: pointer
31         }
32 
33         .a-upload:hover {
34             color: #444;
35             background: #eee;
36             border-color: #ccc;
37             text-decoration: none
38         }
39     </style>
40 </head>
41 <body>
42 <a href="javascript:;" class="a-upload">
43     <input type="file" name="" id="">点击这里上传文件
44 </a>
45 <div id="fileerrorTip"></div>
46 <div id="showFileName"></div>
47 <script src=jquery.min.js></script>
48 <script>
49     //显示文件名
50     $(".a-upload").on("change","input[type='file']",function(){
51         var filePath=$(this).val();
52         if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
53             $("#fileerrorTip").html("").hide();
54             var arr=filePath.split('\\');
55             var fileName=arr[arr.length-1];
56             console.log(fileName);
57             $("#showFileName").html(fileName);
58         }else{
59             $("#showFileName").html("");
60             $("#fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
61             return false;
62         }
63     })
64 </script>
65 </body>
66 </html>

 

posted @ 2017-02-08 10:47  武侯668  阅读(350)  评论(0)    收藏  举报