1. 原生file input大小、按鈕文字等UI自定義
元素input的原生樣式，不是太好看：
有一種方法是這樣的：
讓file類型的元素透明度0，覆蓋在我們好看的按鈕上。然后我們去點擊好看的按鈕，實際上點擊是是file元素。
然而，此方法有一些不足：
- 尺寸控制不靈活。然后高度控制也不精准，我們很難正好覆蓋在好看的自定義按鈕上。
- 樣式不好控制，按鈕的
hover態以及active態不好處理。 - HTML結構限制以及定位成本。
更好的方法是，使用label元素與file控件關聯，好處在於：
- 點擊自定義的漂亮按鈕就是點擊我們file控件；
- 沒有尺寸控制不精確的問題；
- 沒有不能響應hover態active態的問題；
- 我們的漂亮按鈕甚至可以在form表單元素的外面
代碼如下：
<style> .ui_button { padding:10px; background: #01AAED; color: #fff; } .ui_button:hover { opacity: 0.9; } </style> <body> <form> <label class="ui_button" for="xFile">上傳文件</label> <input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"> <span>文件以.video結尾</span> </form> </body>
樣式如下：
2. file類型控件的accept屬性
input file類型控件有一個屬性，名為accept,可以用來指定瀏覽器接受的文件類型.
如果是上傳圖片，可以使用：
上傳視頻類型，可以使用：
如果是其他類型的：可以參考下：
然后，多個屬性值使用逗號分隔，例如：
input file只選擇文件夾而不是文件
試試下面的代碼，測試了下，Chrome瀏覽器下是可以的，Firefox瀏覽器下也是可以的，safari和IE目前還不行，有兼容性問題。
