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

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

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

一、需求

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

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

二、分析

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

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

顯示用戶選擇的圖片

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

判斷圖片格式

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

可用性分析

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

|||

三、html和css代碼

html代碼

html結構很簡單，我們為將其放置到一個class屬性為“filewrap”的div即可，盡管通過js生成了一些html代碼，但是，到目前為止，我們只需要簡單的這樣做就行，即：

< class=”filewrap”>
< type=”file” name=”photo” />
</div>

css代碼

設置.filewrap的屬性，他只是一個容器，主要用來容納“上傳圖片”按鈕<button type=”button”>上傳圖片<button>，錯誤提示消息<p class=”mes”></p>以及圖片顯示的區域<div class=”imgwrap”><img src=”” /></div>。最后生成的完整代碼如下：

<div class="filewrap">;
  <div class="imgwrap">;
   <img src="/lib/img/defimage.gif"/>;
  </div>;
  <div class="fakefile">;
   <button type="button">;瀏覽圖片</button>;
   <p class="mes"/>;
   <input type="file" class="file fakecn" name="photo" id="file_0"/>;
  </div>;
</div>

我們對照生成的代碼，定義相關的css屬性；

定義filewrap需要注意的，需要給其添加overflow:hidden屬性，以確保文本上傳控件不會超出點擊區域，因為文本上傳控件是借助定位使其覆蓋在“點擊按鈕”之上的，另外給其定義一個合適的寬度，filewrap的css屬性如下：

div.filewrap{
 overflow:hidden;
 width:110px;
}

放置圖片的容器imgwrap,為確保圖片能居中顯示，只需定義text-align:center;即可。

div.imgwrap{
 text-align:center;
}

我們將文件上傳控件放到class屬性為fakefile的div中，這樣是為了方便定位，設置其定位屬性為position：relative。需要注意的是，我們要定義padding-top屬性，這是因為錯誤信息位于按鈕的下方，而該按鈕是被絕對定位的，如果不定義padding-top屬性，錯誤信息將被按鈕覆蓋。padding-top的值略高于按鈕的高度，代碼如下：

div.fakefile{
  padding-top:25px;
  position:relative;
}

對于“上傳圖片”按鈕和錯誤信息，其css代碼如下：

div.fakefile button{
 left:10px;
 position:absolute;
 top:3px;/*確保按鈕與圖片之間不會靠的太近*/
 z-index:1;
}
div.fakefile .mes{
 padding:0 3px;
    text-align:left;
}

對于文本上傳控件，設置透明度為0，并定義left值，是其便宜，確保點擊區域位于“上傳圖片”的上方，代碼如下：

div.fakefile input{
 left:-135px;/*大約為輸入框的寬度*/
 opacity:0;
 filter:alpha(opacity:0);
 -moz-opacity:0;
 z-index:2;/*確保控件位于按鈕上方*/
}

|||

四、jquery. livefakefile核心代碼：

關于如何創建jquery插件，這里不做介紹，你可以去官方網站查看相關資料,代碼如下：

(function($){
/*
 * @author denisdeng [email protected]
 * blog www.denisdeng.com
 * $version: 2009.8.11 1.0
 * param reg[string] the format of image;
 * param defimg[string] the default image;
 * param btntext[string] the text of button;
 * param error[string] the error;
 * param imgtext[string] the text when image do not show normaly;
 */

$.fn.livefakefile = function(o){
 var settings = {
   reg:"png|jpe?g|gif|bmp",
   defimg:'img/defimage.gif',
   btntext:'瀏覽圖片',
   blankimg: "img/blank.gif",
   error: '對不起,照片格式不正確,請重新選擇',
   imgtext:'你已經選擇文件'
 };
 var ie7 = $.browser.msie&&($.browser.version == "7.0");
 var ie8 = $.browser.msie&&($.browser.version == "8.0");
 var moz = $.browser.mozilla;
 return this.each(function(i,v){
  if(o) settings = $.extend(settings, o);
  var wrap = $('<div class="fakefile"></div>');
  var mes = $('<p class="mes"></p>');
  var button = $('<button type="button"></button>');
  var parent = $(this).parent('.fileinputs');
  var imgwrap = $('<div class="imgwrap"></div>');
  var defimg = $('<img src="'+settings.defimg+'" />');
  imgwrap.append(defimg);
  button.append(settings.btntext);
  wrap.append(button);
  wrap.append(mes);
  imgwrap.insertbefore($(this)); 
  $(this).attr("id",'file_'+i).appendto(wrap);
  parent.append(wrap);
  $(this).bind('change',function(){
   var val = $(this).val();
   var imgname = val.slice(val.lastindexof("//")+1);
   if(val.match(new regexp(".(" + settings.reg + ")$", "i"))){
    mes.empty();
    //針對不能正常顯示圖片的瀏覽器
    var img = $('<span></span>') .append(settings. imgtext).append(imgname);
    //針對ie7或ie8瀏覽器
    if(ie7 || ie8){
     var img = $('<img src="'+ settings.blankimg+'" alt="" style="filter:progid:dximagetransform.microsoft.
alphaimageloader(sizingmethod=/'scale/',src=/''+val+'/');" />');
    }
    //針對火狐瀏覽器
    if(moz){
     var obj = document.getelementbyid('file_'+i);
     var img = $('<img src="'+obj.files[0].getasdataurl()+'" alt="" width="75" />');
    }
    imgwrap.empty().append(img);
   }else{
    imgwrap.empty().append(defimg);
    mes.html(settings.error);
   }
  });
 })
}
})(jquery)

注意，在上面的代碼中，我先定義的是圖片不能正常顯示的情況，然后對不同瀏覽器做不同處理。使用起來很簡單，在頁面的頭部引入jquery庫和jquery. livefakefile插件，假如頁面中有一個class為”.fake”的文本框，只需調用一下代碼即可：

<script type="text/javascript">;
$(function(){
$(".fake").livefakefile();
})
</script>;

參數reg、defimg、btntext、blankimg、error、imgtext主要用來方便自己定義。如你可以修改，然后調用：

<pre class="brush:javascript">
<script type="text/javascript">;
$(function(){
var obj = {
 reg: "bmp",
 defimg:'img/yourimg.gif',
 btntext:' browse ',
 blankimg: "img/blank.gif",
 error: sorry,the format of image is wrong, please select again!',
 imgtext:'you have select the image:'
}
$(".fake").livefakefile(obj);
})
</script>;

五、相關資源：

• 參考文章：styling an input type=”file”
• 原文地址：http://www.denisdeng.com/?p=348

注：所有轉載者需標明原文地址，謝謝！