網頁制作poluoluo文章簡介：本人將其進行封裝成一個jQuery插件，因網上已經有一個叫jQuery.fakeFile的插件，為了與其區分開來，我將並將其命名為jQuery.liveFakeFile。這篇文章將介紹該方法的原理和使用方法。
使用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結構中我們放置的應該是正常的文件上傳控件。
網頁制作poluoluo文章簡介：本人將其進行封裝成一個jQuery插件，因網上已經有一個叫jQuery.fakeFile的插件，為了與其區分開來，我將並將其命名為jQuery.liveFakeFile。這篇文章將介紹該方法的原理和使用方法。
三、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;/*確保控件位於按鈕上方*/
}
網頁制作poluoluo文章簡介：本人將其進行封裝成一個jQuery插件，因網上已經有一個叫jQuery.fakeFile的插件，為了與其區分開來，我將並將其命名為jQuery.liveFakeFile。這篇文章將介紹該方法的原理和使用方法。
四、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>;
五、相關資源：
注：所有轉載者需標明原文地址，謝謝！