上周的工作中有個批量上傳圖片的頁面，又遇到了這個問題，于是，今天把我的解決方案奉獻給大家：利用label標簽與CSS共同打造一個樣式可控的并兼容IE6之外主流瀏覽器的上傳表單。
實現(xiàn)思路通俗易懂：


首先，我們要新增一個與file相冊大小的button按鈕，然后利用label為初始的file類型表單定義標注(關(guān)于label的解釋與用法，此處不詳解，不了解的請自行查閱HTML手冊)。如此一來，一個可以觸發(fā)選擇文件表單的按鈕就出來了。接下來，相信很多人都知道怎么做了。
有了一個可以觸發(fā)file表單的按鈕，只要通過絕對定位將file表單從文檔流中拖出，然后用z-index屬性將它的層級提升到比button按鈕高，同時將file表單的透明度置為0，這樣一來，file表單就正好覆蓋在button按鈕上了，并且可觸發(fā)選擇文件表單。此處有一點需要說明，F(xiàn)ireFox中是無法通過width來設(shè)定寬度值的，所以需要用input的size值來設(shè)定file表單寬度值。
最后，附上樣例中的成型代碼：
HTML代碼:


CSS代碼:


幾個注意的細節(jié)：
1.file表單與button按鈕的高寬一定要相同；
2.因各瀏覽器對file表單的表現(xiàn)不一致，其邊框一定要隱藏掉，以免出現(xiàn)各瀏覽器不兼容問題；
3.firefox中直接通過樣式定義width是無效的，需要用size設(shè)置file寬度；
4.IE6可用JS為button綁定file表單的點擊事件，此處不詳述。

另，本文提供的是一種主體思路，你可以在此思路上做進一步的美化擴展，比如加背景圖片文字樣式等等。

最新評論