使用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;/*确保控件位于按钮上方*/
}
|||
四、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>;
五、相关资源：
注：所有转载者需标明原文地址，谢谢！
新闻热点
疑难解答
