中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

使用css來美化表單元素時，一直沒有好的方法美化文件上傳控件。http://www.quirksmode.org/dom/inputfile.html(網站好像出錯)提供了美化文件上傳控件的方法。本人在該方法的啟發(fā)之下，結合自己的項目，將其功能更加完善，經過改善之后，其具有以下特點：

1. 用戶所見并不是文件上傳按鈕，而是一個按鈕；
2. 可以對圖片的格式進行限制；
3. 用戶選擇的圖片可以顯示在特定區(qū)域之中（IE6、safari、opera除外）；
4. 在用戶禁用js的情況下文件上傳控件保持可用狀態(tài)。

本人將其進行封裝成一個jQuery插件，因網上已經有一個叫jQuery.fakeFile的插件，為了與其區(qū)分開來，我將并將其命名為jQuery.liveFakeFile。這篇文章將介紹該方法的原理和使用方法。

一、需求

需求很簡單，但實現起來需要一定得技巧，簡述如下：

1. 要求不出現文件上傳控件，而是一個“上傳圖片”的按鈕，用戶單擊該按鈕時彈出圖片對話框；
2. 選擇圖片后，圖片在按鈕上方顯示出來，默認情況下，顯示默認的圖片；
3. 對選擇的圖片進行格式判斷，一旦不符合要求，在按鈕下方顯示錯誤信息，并顯示默認的圖片。

二、分析

實現點擊按鈕彈出選擇圖片對話框效果

文本上傳控件前面有一輸入框，受Michael McGrady(ljzcome曾翻譯過此文)的啟示，我們創(chuàng)建“上傳圖片”按鈕，然后改變文件上傳控件的opacity屬性，將其設置為0，并通過定位屬性使點擊區(qū)域位于按鈕之上。這樣，用戶的每一次點擊看似是點擊的按鈕，實則是文本上傳控件本身。

顯示用戶選擇的圖片

要顯示圖片看似很簡單，但各個瀏覽器之間存在差異，IE6并不能正確顯示圖片，IE7可以通過使用濾鏡AlphaImageLoder使其顯示。而Firefox也不能正常顯示圖片，但它有一個方法可以使圖片顯示—getAsDataURL()。其他瀏覽器opera、safari也不能正常顯示圖片。所以我們使用瀏覽器嗅探技術對不同的瀏覽器分別處理，對不能正常顯示圖片的瀏覽器讓其顯示文字即可。

判斷圖片格式

只需在觸發(fā)文件上傳控件的change事件時通過正則表達式驗證即可，一旦符合格式要求即將圖片或提示文字顯示出來，否則顯示錯誤提示信息。

可用性分析

因為是通過js來改變文件上傳控件的外觀，那么就必須保證用戶在禁用js的情況下能正常上傳圖片。所以在html結構中我們放置的應該是正常的文件上傳控件。

出處：
責任編輯：bluehearts

上一頁 下一頁 使用jQuery改進文件上傳控件 [2]

◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。