使用css来美化表单元素时，一直没有好的方法美化文件上传控件。http://www.quirksmode.org/dom/inputfile.html(网站好像出错)提供了美化文件上传控件的方法。本人在该方法的启发之下，结合自己的项目，将其功能更加完善，经过改善之后，其具有以下特点：

1. 用户所见并不是文件上传按钮，而是一个按钮；
2. 可以对图片的格式进行限制；
3. 用户选择的图片可以显示在特定区域之中（IE6、safari、opera除外）；
4. 在用户禁用js的情况下文件上传控件保持可用状态。

本人将其进行封装成一个jQuery插件，因网上已经有一个叫jQuery.fakeFile的插件，为了与其区分开来，我将并将其命名为jQuery.liveFakeFile。这篇文章将介绍该方法的原理和使用方法。

一、需求

需求很简单，但实现起来需要一定得技巧，简述如下：

1. 要求不出现文件上传控件，而是一个“上传图片”的按钮，用户单击该按钮时弹出图片对话框；
2. 选择图片后，图片在按钮上方显示出来，默认情况下，显示默认的图片；
3. 对选择的图片进行格式判断，一旦不符合要求，在按钮下方显示错误信息，并显示默认的图片。

二、分析

实现点击按钮弹出选择图片对话框效果

文本上传控件前面有一输入框，受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 [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>;

五、相关资源：

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

注：所有转载者需标明原文地址，谢谢！

评论 (0) All

登陆 还没注册？