巧妙利用label標籤實現input file上傳文件自定義樣式

 

　　提到上傳文件，通常會想到用input file屬性來實現，簡單便捷，一行代碼便可

　　

　   但input file原生提供的默認樣式大多狀況下都不符合需求，且在不一樣瀏覽器上呈現的樣式也不盡相同

　　

　  咱們每每須要爲其自定義樣式，而直接對input添加樣式是一件麻煩的事，

　 由於input自己有默認的樣式，咱們須要一一覆蓋，而且一些樣式咱們也沒法覆蓋，

　 好比你想把選擇文件的字體顏色設置爲和未選擇任何文件的字體顏色同樣，就沒法實現

　 

 

　 之前遇到該問題時，我會新建一個div，給它添加相應樣式，而後定位覆蓋在原生input上面，

　這樣的作法雖然略顯笨拙，但好在可以實際解決問題

　 

　如今有一種更好的方法可替代上面方法，那就是使用label標籤，

　用label標籤的for屬性關聯到input文件輸入框，點擊label標籤時會觸發input文件輸入框的點擊，

   打開瀏覽文件的對話框，至關於點擊了文件輸入框，記得把input隱藏掉

<!-- 自定義樣式 -->
        <label for="file-input">label</label>
        <input type="file" id="file-input"  style="display: none;" multiple="multiple" />

　 注：上面代碼中的multiple屬性表示上傳文件時可多選，不加該屬性默認只能選一個文件上傳

　 參考原文