四、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>;

查看demo

五、相关资源：

• 参考文章：Styling an input type=”file”
• 示例下载： jQuery. liveFakeFile.rar
• 原文地址：http://www.denisdeng.com/?p=348

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

本文链接：http://www.blueidea.com/tech/web/2009/6944.asp　

出处：Denis'Blog
责任编辑：bluehearts

上一页 使用jQuery改进文件上传控件 [2] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。