input[type="file"]的樣式以及文件名的顯示

如何美化input[type="file"]

基本思路是：

（1）首先在 input 外層套一個 div ；

（2）將 div 和 input 設置為一樣大小（width和height）；

（3）設置 div 為相對位置， input 為絕對位置，並將 input 的 top 和 right 設為 0 ；

這樣， div 和 input 就重疊了，點擊 div 就相當於點擊 input ；

（4）設置 input 的 opacity 為 0 ，全透明，這樣就只能看見 div 了；

至於 div 的樣式就隨便設置了。

html:

<form action="#" enctype="multipart/form-data" method="post">
    <div class="fileupload">
                <script>
      function getFilename(){
        var filename=document.getElementById("file").value;
        if(filename==undefined||filename==""){
          document.getElementById("filename").innerHTML="點擊此處上傳文件";
        } else{
          var fn=filename.substring(filename.lastIndexOf("\\")+1);
          document.getElementById("filename").innerHTML=fn; //將截取后的文件名填充到span中
        }
      }
    </script>
   <span id="filename">點擊此處上傳文件</span>
   <input type="file" name="file" id="file" onchange="getFilename()"/>
    </div>
</form>

 

css:

/*文件上傳*/
.fileupload{
    position: relative;
    width:200px;
    height:35px;
    border:1px solid #66B3FF;
    border-radius: 4px;
    box-shadow: 1px 1px 5px #66B3FF;
    line-height: 35px;
    padding-left: 8px;
    overflow: hidden;
}
.fileupload input{
    position: absolute;
    width:200px;
    height:35px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: 'alpha(opacity=0)';
}

注意：input[type="file"] 的文件路徑是受保護的，用 js 獲取不到，使用上傳的插件可以獲取到。（只是從前端的角度講）