File雜談——初識file控件

首先我說明下，這裏介紹的file控件指的是網頁中的FileUpload對象，也就是咱們常見的<input type="file">。若是你不是想尋找這方面的東西，就能夠繞道了。

功能

當咱們須要在網頁中實現文件上傳功能的時候，file控件就能夠大顯身手了。HTML文檔中每添加一個<input type="file">，實際就是建立了一個FileUpload實例對象。用戶能夠經過點擊file控件選擇本地文件，當咱們提交包含該file控件的表單時，瀏覽器會向服務器發送用戶選中的本地文件。從而將本地文件傳輸到服務器，供其餘網絡用戶下載或使用，實現文件上傳功能。

美中不足

無可厚非，file控件很強大，給網頁上傳文件帶來了極大的便利。可是，它並不是完美！

首先，從控件自己而言，咱們能夠經過value屬性獲取到用戶選擇的文件名稱，但出於安全性等因素考慮，該屬性沒法指定默認值，而且該屬性爲只讀屬性。

其次，恐怕也是file控件令不少開發者頭疼的地方。file控件在各個主流瀏覽器之間的表現大有差別，給用戶帶來的視覺感覺截然不同，並且幾乎不可能經過直接修改樣式來達到統一，下面我用一張圖來更清晰的告訴你們：

一目瞭然了吧？更可惡的是「選擇文件」、「Browse...」、「瀏覽...」三處文字均沒法更改！！然而，這僅僅是視覺上的差別，不一樣瀏覽器下file控件的行爲也存在一些差別：

• A一、A二、A三、A四、A6，五處咱們都可以單擊觸發文件選擇
• A5 處咱們卻須要雙擊才能觸發文件選擇

總之，file控件從默認視覺效果和交互體驗方面來說，是開發人員和普通用戶都很難接受的。

道高一尺，魔高一丈

既然默認的東西咱們都不能接受，那麼不能接受的東西咱們就要去改變它。

通過無數開發者的不斷實踐證實，咱們不能經過改變寬度，高度，來控制file控件中按鈕的尺寸，可是咱們能夠經過設置file控件的字體大小(font-size)來改變這個按鈕的尺寸，更使人可觀的是主流瀏覽器對改變font-size的表現是一致的。

那麼，聰明的開發者們就有了應對之策了。

首先，咱們從前面表現差別描述中能夠發現A二、A四、A6，三處都可單擊觸發文件選擇文件，而且這三處還有一個共同點——它們均處於控件右側，那麼咱們就能夠改變控件字體大小，讓右側這一部分足夠大，而且只讓用戶看見這一區域（或部分），而且只讓用戶操做該區域，那麼A5處交互效果不一致的問題就能夠解決了。爲了達到這個目的，咱們能夠在file控件外面包裹一層容器，並設置尺寸，經過定位將file控件右邊區域顯示到目標區域，併爲容器設置溢出隱藏(overflow: hidden)。我仍是用代碼來講明吧：

<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 爲了顯示可見區域，非必須 */
        overflow: hidden;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
</div>

在瀏覽器中查看上面代碼的效果，顯然Chrome、Firefox、IE下顯示效果明顯太不同了（其實文字被放大擠出可見區域了，幾乎啥都看不到），那麼怎麼應對呢？所謂「道高一尺，魔高一丈」，這裏簡單的原理就是讓file控件處於較高的層（z-index），而且設置透明（opacity，低版本IE用filter），讓後面的元素來設置樣式，以此達到視覺風格統一。說得不是很明白，仍是直接上代碼吧：

<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 爲了顯示可見區域，非必須 */
        overflow: hidden;
        cursor: pointer;
        line-height: 80px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background-color: #f50;
        border-radius: 4px;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }
    .file-group:hover {
        background-color: #f60;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
    選擇文件
</div>

最後咱們再看下各瀏覽器表現一致的最終顯示效果及交互體驗：

OK，到這裏咱們算是對file控件有個簡單的認識了，後面我還會提供更多file控件或根據file控件延伸出去的相關資料，有興趣的朋友能夠持續關注。

做者博客：百碼山莊