一个漂亮的上传按钮input[type=file] 

.xj-file input[type=file]{border:none; outline:none; position:absolute; top:0; left:0px; width:54px; height:34px; cursor:pointer; filter:alpha(opacity=0); opacity:0;}
1 <div class="input-group xj-file xj-panel-top">
2           <span class="input-group-btn">
3             <button class="btn btn-default" type="button">浏览</button>
4           </span>
5           <input type="text" class="form-control" id="viewfile" placeholder="">
6           <input type="file" id="" onchange="document.getElementById('viewfile').value=this.value;">
7         </div>

基于

将其定位起来透明度设为0，再将其获取的路径值传给美化过的显示框就OK啦！效果图如下

posted @ 2016-03-11 15:05  知兮  阅读(553)  评论(0)  编辑  收藏  举报