input file美化
Posted 浅陌初心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input file美化相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .upload { 11 position: relative; 12 display: inline-block; 13 height: 33px; 14 line-height: 33px; 15 overflow: hidden; 16 vertical-align: middle; 17 cursor: pointer; 18 } 19 20 .upload .upload-input-file { 21 position: absolute; 22 right: 0; 23 top: 0; 24 font-size: 100px; 25 opacity: 0; 26 filter: alpha(opacity=0); 27 cursor: pointer; 28 } 29 30 .upload .upload-btn { 31 outline: none; 32 border: 0; 33 padding: 7px 10px; 34 color: #fff; 35 background: #1c84c6; 36 cursor: pointer; 37 margin: 3px; 38 border-radius: 3px; 39 } 40 41 .upload .upload-url { 42 -moz-box-sizing: border-box; 43 -webkit-box-sizing: border-box; 44 box-sizing: border-box; 45 border-radius: 2px; 46 border: solid 1px #ddd; 47 width: 200px; 48 height: 30px; 49 -webkit-line-height: 1; 50 line-height: 30px\9; 51 -ms-line-height: 30px; 52 text-indent: 3px; 53 } 54 55 .upload .upload-tip { 56 display: none; 57 background-color: #1c84c6; 58 padding: 2px 10px; 59 color: #fefefe; 60 font-size: 12px !important; 61 border-radius: 3px; 62 } 63 </style> 64 </head> 65 66 <body> 67 <div class="lcell span6"> 68 <div class="lrow"> 69 <h4>上传按钮 file</h4> 70 <div class="lcell span1" style="line-height:35px;">附件：</div> 71 <div class="lcell span5"> 72 <span class="upload"> 73 <input type="button" class="upload-btn" value="浏览文件" /> 74 <span class="upload-tip"></span> 75 <input type="file" class="upload-input-file" /> 76 </span> 77 </div> 78 <div class="pc-line"> 79 <h4>带文本框</h4> 80 </div> 81 <div class="lcell span1" style="line-height:35px;">附件：</div> 82 <div class="lcell span5"> 83 <span class="upload"> 84 <input type="text" class="upload-url" /> 85 <input type="button" class="upload-btn" value="浏览文件" /> 86 <input type="file" class="upload-input-file" /> 87 </span> 88 </div> 89 </div> 90 </div> 91 </body> 92 <script> 93 $(".upload .upload-input-file").change(function() { 94 if ($(this).parent().html().indexOf("class=\"upload-url\"") != -1) { 95 var fileUrl = $(this).val(); 96 $(this).parent().children(".upload-url").val(fileUrl); 97 } else { 98 var fileUrl = $(this).val(); 99 var urlArr = fileUrl.split("\\"); 100 var getName = urlArr[urlArr.length - 1]; //截取路径并获取文件的名字 101 $(this).parent().children(".upload-tip").text(getName).fadeIn("slow"); 102 //$(this).parent().children(".upload-btn").val(getName);//按钮上变成文件名称 103 timeout = setTimeout(function() { 104 $(".upload-tip").fadeOut("slow"); 105 }, 5000); 106 } 107 }); 108 </script> 109 110 </html>
以上是关于input file美化的主要内容，如果未能解决你的问题，请参考以下文章
input[type=file] 样式美化，input上传按钮美化
input[type=file] 样式美化，input上传按钮美化