基于jquery跨浏览器显示的file上传控件

 更新时间:2011年10月24日 23:29:52   作者:  
前面我写过一篇短小的文章,简要的介绍了下怎样定义input type=file 的样式。对于一般的表单,上传控件较少,这样的做法确实不错,既减少了代码,又美化了样式
前面我写过一篇短小的文章,简要的介绍了下怎样定义input type="file" 的样式。对于一般的表单,上传控件较少,这样的做法确实不错,既减少了代码,又美化了样式,原文:《定义input type="file" 的样式

其实要实现给file控件定义样式,大致思想都是一样的。

今天看到博客园的繁花连写两篇文章来研究file控件
jquery.fileEveryWhere.js--一个跨浏览器的file显示插件
firefox下input type="file"的size是多大

我这里也按捺不住了。成果是繁花的,以下内容引用自上面两篇文章:

大牛ppk都说过,在从多表单控件中,上传文件控件的样式是最难以控制的。见文章Styling an input type="file"。本插件也多是参考此文。

先来看看input type="file"在chrome,ie,firefox这三个浏览器下表情各异吧。



chrome像是button+label组合,看起差异最大。

ff和ie,是text+button的组合,就外形来看,firefox更标准,事实上firefox存在两个潜在问题:
1,firefox对type="file" 的input的width定义目前是不支持的(但是FF支持size属性,可以给size设置一个值,来控制上传框的大小,至于这个size到底是多大,见文章繁花-firefox下input type="file"的size是多大)。
2,火狐浏览器的提交file表单时只提交文件名不提交路径,而IE提交的是路径+文件名,chrome也能提交路径+文件名,但只显示文件名。火狐浏览器的提交file表单时只提交文件名不提交路径(很遗憾,暂时没有解决方法)

要让file在各个浏览器显示统一,纯样式已经控制不了,只能用js脚本了。基本步骤有3:
1,通过文本框和按钮去模拟一个input type=”file”。
2,把input="file"做成透明,用定位完全盖住文本框和按钮。
3,当input type=”file”的onchange的时,用js将文本框的值设置成input type=”file”的值。

了解步骤后,整个插件就很好写了,代码如下:
复制代码 代码如下:

/*
* file everywhere - 浏览器通用文件上传
* copyright->flowerszhong
* flowerszhong@gmail.com
* http://www.cnblogs.com/flowerszhong/
*/
(function($) {
$.fn.fileEveryWhere = function(options) {
var defaults = {
WrapWidth: 300,
WrapHeight: 30,
ButtonWidth: 60,
ButtonHeight: 28,
ButtonText: "浏览",
TextHeight: 28,
TextWidth: 240
};
var options = $.extend(defaults, options);
var browser_ver = $.browser.version.substr(0, 1);
var displayMode = ($.browser.msie && browser_ver <= "7") ? "inline" : "inline-block";
return this.each(function() {
//创建包含,设置为相对定位
var wrapper = $("<div class='fileWraper'>")
.css({
"width": options.WrapWidth + "px",
"height": options.WrapHeight + "px",
"display": displayMode,
"zoom": "1",
"position": "relative",
"overflow": "hidden",
"z-index":"1"
});
//创建文本输入框,用于存放上传文件名称
var text = $('<input class="filename" type="text" />')
.css({
"width": options.TextWidth + "px",
"heigth": options.TextHeight + "px"
});
//创建浏览按钮
var button = $('<input class="btnfile" type="button" />')
.val(options.ButtonText);
$(this).wrap(wrapper).parent().append(text, button);
$(this).css({
"position": "absolute",
"top": "0",
"left": "0",
"z-index": "2",
"height": options.WrapHeight + "px",
"width": options.WrapWidth + "px",
"cursor": "pointer",
"opacity": "0.0",
"outline":"0",
"filter": "alpha(opacity:0)"
});
if ($.browser.mozilla) { $(this).attr("size", 1 + (options.WrapWidth - 85) / 6.5) }
$(this).bind("change", function() {
text.val($(this).val());
});
});
};
})(jQuery);

使用很简单:

$("input:file").fileEveryWhere({参数});



firefox对type="file" 的input的width定义目前是不支持的,但是FF支持size属性,可以给size设置一个值,来控制上传框的大小。
但是这个size值怎么设置,size="10"是多宽,默认值又是多少,不能光凭感觉去设置。 用脚本来查看下:
复制代码 代码如下:

<script type="text/javascript">
$(function() {
var fileArray = [];
var i = 0;
while (i < 100) {
fileArray.push(i + ":<input type='file' size='" + i + "' /><br />");
i++;
}
document.write(fileArray.join(""));
$("input:file").each(function() { $(this).after("<b>" + $(this).width() + "</b>") });
});
</script>

在火狐下得到这样的结果:


发现了一定的规律,默认为208像素,size="1"时为85像素,每个size之间相差6.5个像素的宽度,所以我们可以动态的设定size的值,如:
复制代码 代码如下:
if ($.browser.mozilla) { $(this).attr("size", 1 + (options.WrapWidth - 85) / 6.5)

相关文章

  • 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)

    使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)

    今天将登录功能彻底完成,加入记住密码自动登录功能,密码在客户端进行第一次加密存储。并修改了一些bug,优化js代码,上一版本太乱了。
    2011-07-07
  • JQuery遍历json数组的3种方法

    JQuery遍历json数组的3种方法

    这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each、for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下
    2014-11-11
  • jquery对象和DOM对象的区别介绍

    jquery对象和DOM对象的区别介绍

    jquery对象和DOM对象在使用过程很频繁,正是因为如此,好多朋友都不知道它们之间有什么区别,下面为大家详细介绍下,希望对大家有所帮助
    2013-08-08
  • 详解layui弹窗父子窗口之间传参数的方法

    详解layui弹窗父子窗口之间传参数的方法

    本篇文章主要介绍了ayui弹窗父子窗口之间传参数的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • JQuery slideshow的一个小问题(如何发现及解决过程)

    JQuery slideshow的一个小问题(如何发现及解决过程)

    在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,在打开页面所以的正常测试都没问题:当浏览器同时打开多个tab,停留他tab中的页面一段时间后,会出现图片是最后一张图片,针对这个问题,本文给予了详细的解决方法,感兴趣的朋友可以了解下
    2013-02-02
  • jquery 实现返回顶部功能

    jquery 实现返回顶部功能

    本文给大家带来的是使用javascript结合jQuery实现返回顶部的功能,并附上源码,送给大家,需要的童鞋直接拿走吧
    2014-11-11
  • struts2 jquery 打造无限层次的树

    struts2 jquery 打造无限层次的树

    需要:Struts2 , jquery树插件 模拟数据库数据:每行数据包括--自己ID,自己内容,父亲ID
    2009-10-10
  • jquery实现员工信息添加与删除功能

    jquery实现员工信息添加与删除功能

    这篇文章主要为大家详细介绍了利用jquery制作简易的员工信息添加与删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • jquery选择器使用详解

    jquery选择器使用详解

    JQuery是一个很NB的js集成作品,以其简洁的语法和跨平台兼容性的优势,这里给大家介绍下JQuery中的选择器,不理解选择器或者用不好选择器,是不可能有一手很NB的JQuery技能的
    2014-04-04
  • 为jquery的ajaxfileupload增加附加参数的方法

    为jquery的ajaxfileupload增加附加参数的方法

    这篇文章主要介绍了为jquery的ajaxfileupload增加附加参数的方法,需要的朋友可以参考下
    2014-03-03

最新评论