使用css来美化表单元素时，一直没有好的方法美化文件上传控件。
提供了美化文件上传控件的方法。本人在该方法的启发之下，结合自己的项目，将其功能更加完善，经过改善之后，其具有以下特点：
用户所见并不是文件上传按钮，而是一个按钮;
可以对图片的格式进行限制;
用户选择的图片可以显示在特定区域之中(IE6、safari、opera除外);
在用户禁用js的情况下文件上传控件保持可用状态。
本人将其进行封装成一个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="http://sendong.com/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 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>;
