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>

 

posted @ 2017-09-29 15:22  浅陌初心  阅读(390)  评论(0)  编辑  收藏  举报