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

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

本人將其進(jìn)行封裝成一個(gè)jquery插件，因網(wǎng)上已經(jīng)有一個(gè)叫jquery.fakefile的插件，為了與其區(qū)分開來(lái)，我將并將其命名為jquery.livefakefile。這篇文章將介紹該方法的原理和使用方法。

一、需求

需求很簡(jiǎn)單，但實(shí)現(xiàn)起來(lái)需要一定得技巧，簡(jiǎn)述如下：

1. 要求不出現(xiàn)文件上傳控件，而是一個(gè)“上傳圖片”的按鈕，用戶單擊該按鈕時(shí)彈出圖片對(duì)話框；
2. 選擇圖片后，圖片在按鈕上方顯示出來(lái)，默認(rèn)情況下，顯示默認(rèn)的圖片；
3. 對(duì)選擇的圖片進(jìn)行格式判斷，一旦不符合要求，在按鈕下方顯示錯(cuò)誤信息，并顯示默認(rèn)的圖片。

二、分析

實(shí)現(xiàn)點(diǎn)擊按鈕彈出選擇圖片對(duì)話框效果

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

顯示用戶選擇的圖片

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

判斷圖片格式

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

可用性分析

因?yàn)槭峭ㄟ^js來(lái)改變文件上傳控件的外觀，那么就必須保證用戶在禁用js的情況下能正常上傳圖片。所以在html結(jié)構(gòu)中我們放置的應(yīng)該是正常的文件上傳控件。

|||

三、html和css代碼

html代碼

html結(jié)構(gòu)很簡(jiǎn)單，我們?yōu)閷⑵浞胖玫揭粋€(gè)class屬性為“filewrap”的div即可，盡管通過js生成了一些html代碼，但是，到目前為止，我們只需要簡(jiǎn)單的這樣做就行，即：

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

css代碼

設(shè)置.filewrap的屬性，他只是一個(gè)容器，主要用來(lái)容納“上傳圖片”按鈕<button type=”button”>上傳圖片<button>，錯(cuò)誤提示消息<p class=”mes”></p>以及圖片顯示的區(qū)域<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>

我們對(duì)照生成的代碼，定義相關(guān)的css屬性；

定義filewrap需要注意的，需要給其添加overflow:hidden屬性，以確保文本上傳控件不會(huì)超出點(diǎn)擊區(qū)域，因?yàn)槲谋旧蟼骺丶墙柚ㄎ皇蛊涓采w在“點(diǎn)擊按鈕”之上的，另外給其定義一個(gè)合適的寬度，filewrap的css屬性如下：

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

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

div.imgwrap{
 text-align:center;
}

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

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

對(duì)于“上傳圖片”按鈕和錯(cuò)誤信息，其css代碼如下：

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

對(duì)于文本上傳控件，設(shè)置透明度為0，并定義left值，是其便宜，確保點(diǎn)擊區(qū)域位于“上傳圖片”的上方，代碼如下：

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

|||

四、jquery. livefakefile核心代碼：

關(guān)于如何創(chuàng)建jquery插件，這里不做介紹，你可以去官方網(wǎng)站查看相關(guān)資料,代碼如下：

(function($){
/*
 * @author denisdeng dexibe@gmail.com
 * 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: '對(duì)不起,照片格式不正確,請(qǐng)重新選擇',
   imgtext:'你已經(jīng)選擇文件'
 };
 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();
    //針對(duì)不能正常顯示圖片的瀏覽器
    var img = $('<span></span>') .append(settings. imgtext).append(imgname);
    //針對(duì)ie7或ie8瀏覽器
    if(ie7 || ie8){
     var img = $('<img src="'+ settings.blankimg+'" alt="" style="filter:progid:dximagetransform.microsoft.
alphaimageloader(sizingmethod=/'scale/',src=/''+val+'/');" />');
    }
    //針對(duì)火狐瀏覽器
    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)

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

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

參數(shù)reg、defimg、btntext、blankimg、error、imgtext主要用來(lái)方便自己定義。如你可以修改，然后調(diào)用：

<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>;

五、相關(guān)資源：

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

注：所有轉(zhuǎn)載者需標(biāo)明原文地址，謝謝！