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>