css 上傳控制項美化

一般來說，上傳控制項不是用flash做就是用input[type=file]元素了，但flash在IPAD上沒救了，而input[type=file]在各種瀏覽器中又長得不是一個樣子，因此已經我們需要用CSS來處理一下。聽說webkit可以用-webkit-appearance:none;清除預設樣式，就可以讓你為所欲為了。但天朝的炮灰們（有些公司喜歡稱我們為前端攻城師，那豈不就是炮灰吧，每改設計一次就爛頭焦額，半死不活），是用不起這麼進階的東東，我們還要相容IE6呢。最後問群裡的大大，找到解決方案。

原理大致如下，既然原來的input[type=file]元素很難看就讓它消失吧。這裡的消失是讓它其透明化，並在外面為其包一層，那個父元素相對定位。然後在裡面添加一個DIV元素鋪底，它與input[type=file]元素是兄弟，但它是絕對位置向靠左對齊，層級為1，input[type=file]元素是絕對位置向靠右對齊，層級為3。那個DIV裡面再加一個input[type=text]元素，用來冒充input[type=file]，我們可以對它做各種美化。好了，現在是類比原來上傳控制項的瀏覽按鈕的時候了。讓那個DIV也變成一個定位元素，裡面放個DIV或IMG什麼，這個元素我姑且稱之為偽上傳按鈕吧。偽上傳按鈕絕對位置向靠右對齊，層級為2。當使用者點擊它時，其實是點中那個透明化了的input[type=file]元素。最後是互動部分，預設選中上傳檔案後，此檔案的路徑會出現在input裡面的，我們搞一個onchange事件，將input[type=file]的value值賦給input[type=text]就行了。

下面是HTML部分

                                    <div id="file_wrapper">                                        <div id="file_faker">                                            <input />                                            <div id="file_btn">                                                瀏 覽                                            </div>                                            <span class="ctr"></span>                                            <span class="cbr"></span>                                            <!-- 隱藏真正的上傳 -->                                        </div>                                        <input type="file" id="file_uploader" />                                    </div>

CSS部分

#file_wrapper {    position: relative;    width:200px;    height:20px;    display:inline-block;}#file_faker {    position: absolute;    top: 0px;    left: 0px;    z-index: 1;}/* 這是使用者看到的按鈕*/#file_faker input{    width:200px;    height:18px;}/* 這裡是按鈕*/#file_btn {    position:absolute;    top:0;    right:0;    width:60px;    height:20px;    line-height:20px;    text-align :center;    background:#878787;    color:#fff;    z-index: 2;}#file_uploader {    position: relative;    text-align: right;    -moz-opacity:0 ;    filter:alpha(opacity: 0);    opacity: 0;    z-index: 3;}/* 類比圓角 */.ctr,.cbr{    position:absolute;    background:#fff;    width:1px;    height:1px;    display:block;    z-index:4;}.ctr{    top:0px;    right:0px;}.cbr{    bottom:0px;    right:0px;}

JS互動部分

window.onload = function(){    var $= function (id) {        return "string" == typeof id ? document.getElementById(id) : id;    };     $("file_uploader").onchange = function(){       $("text_box").value = this.value;    }}

瀏 覽