本文來自：http://www.zhangxinxu.com/wordpress/2015/11/html-input-type-file/

原生的file input不收待見的另外一個原因是：長的丑還不好控制。

舉個例子，下圖這個“選擇文件”這幾個文字，我們就不好對file控件動刀子實現自定義：

怎么辦呢？

有一種方法是這樣的：
讓file類型的元素透明度0，覆蓋在我們好看的按鈕上。然后我們去點擊好看的按鈕，實際上點擊是是file元素。

然而，此方法有一些不足：

尺寸控制不靈活。CSS?width屬性有些瀏覽器不管用，需要使用size，然后高度控制也不精準，我們很難正好覆蓋在好看的自定義按鈕上。

樣式不好控制，按鈕的hover態以及active態不好處理。

HTML結構限制以及定位成本。

更好的方法是，使用label元素與file控件關聯，好處在于：

點擊自定義的漂亮按鈕就是點擊我們file控件；

沒有尺寸控制不精確的問題；

沒有不能響應hover態active態的問題；

我們的漂亮按鈕甚至可以在form表單元素的外面，例如： <label class="ui_button ui_button_primary" for="xFile">上傳文件</label> <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

轉載于:https://www.cnblogs.com/zhou195/p/7449549.html

總結

以上是生活随笔為你收集整理的input 打开文件夹事件委托的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。