input type=file文件選擇
阿新 • • 發佈：2018-03-31
上傳文件 元素 原因 控制 image rim 系統 類型 label 1、本文所說的
1、本文所說的input type=file指的是type類型是file的input元素，最簡HTML代碼如下：
<input type="file">
2、原生file input大小、按鈕文字等UI自定義，原生的file input不收待見的另外一個原因是：長的醜還不好控制。
有一種方法是這樣的：
讓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>
3、file類型控件的accept屬性
input file類型控件有一個屬性，名為accept, 可能有些小夥伴不太了解。可以用來指定瀏覽器接受的文件類型，也就是的那個我們打開系統的選擇文件彈框的時候，默認界面中呈現的文件類型。例如：accept="image/jpeg"，則界面中只有jpg圖片，如下截圖，同時，窗體右下方是“自定義文件”按鈕：
建議使用：
accept="image/png, image/jpeg, image/gif, image/jpg"
input type=file文件選擇