使用jQuery改进文件上传控件

superadmin · 发表于 2009-8-12 17:46:12

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

用户所见并不是文件上传按钮，而是一个按钮;

可以对图片的格式进行限制;

用户选择的图片可以显示在特定区域之中(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结构中我们放置的应该是正常的文件上传控件。

superadmin · 发表于 2009-8-12 17:46:38

三、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;/*确保控件位于按钮上方*/
}

superadmin · 发表于 2009-8-12 17:47:04

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

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

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

使用jQuery改进文件上传控件

相关帖子

浏览过的版块