極簡bootstrap file 美化樣式(無需第三方插件)

原本的file上傳表單非常的丑,但是又不想使用第三方插件,Bootstrap也沒有相關的美化,於是用純CSS完成,美化,JS實現功能,連BootStrap都不需要,十分簡單

1.給原版丑表單隱藏了display:none

<!-- 真正的文件上傳表單 -->
 <input name="realFile" type="file" id="thisfile" style="display: none" /> 
     
 <div class="input-append">  
       <!-- 用於展示上傳文件名的表單 -->
       <input id="showname" class="input-large" type="text" style="height:25px;">  
        <!-- 點擊觸發按鈕 -->
        <a class="btn" onclick="makeThisfile()" id="browse">瀏覽</a>  
 </div>  

2.css代碼

#browse{
    order: 1px solid #ccc;
    padding: 4px;
    border-radius: 4px;
    background-color: #2c9a8a;
    color: #fff;
}

3.js代碼,它在點擊假表單的時候觸發真表單,彈出文件筐,當選擇時,又將真表單的文件名載入到展示框

<script type="text/javascript">
 //觸發隱藏的file表單
 function makeThisfile(){
        $('#thisfile').click();
  }
 
   //file表單選中文件時,讓file表單的val展示到showname這個展示框
  $('#thisfile').change(function(){
        $('#showname').val($(this).val())
    })
</script> 

 

完畢