使用css來美化表單元素時，一直沒有好的方法美化文件上傳控件。http://www.quirksmode.org/dom/inputfile.html(網站好像出錯)提供了美化文件上傳控件的方法。本人在該方法的啟發之下，結合自己的項目，將其功能更加完善，經過改善之后，其具有以下特點：
本人將其進行封裝成一個jquery插件，因網上已經有一個叫jquery.fakefile的插件，為了與其區分開來，我將并將其命名為jquery.livefakefile。這篇文章將介紹該方法的原理和使用方法。
一、需求
需求很簡單，但實現起來需要一定得技巧，簡述如下：
二、分析
實現點擊按鈕彈出選擇圖片對話框效果
文本上傳控件前面有一輸入框，受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;/*確?？丶挥诎粹o上方*/
}
|||
四、jquery. livefakefile核心代碼：
關于如何創建jquery插件，這里不做介紹，你可以去官方網站查看相關資料,代碼如下：
(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: '對不起,照片格式不正確,請重新選擇',
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>;
五、相關資源：
注：所有轉載者需標明原文地址，謝謝！
新聞熱點
疑難解答
圖片精選
