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>
