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


Posted in Javascript onOctober 24, 2011

前面我写过一篇短小的文章,简要的介绍了下怎样定义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这三个浏览器下表情各异吧。

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

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>

在火狐下得到这样的结果:
基于jquery跨浏览器显示的file上传控件

发现了一定的规律,默认为208像素,size="1"时为85像素,每个size之间相差6.5个像素的宽度,所以我们可以动态的设定size的值,如:

if ($.browser.mozilla) { $(this).attr("size", 1 + (options.WrapWidth - 85) / 6.5)
Javascript 相关文章推荐
优化JavaScript脚本的性能的几个注意事项
Dec 22 Javascript
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
js校验开始时间和结束时间
May 26 Javascript
详解Vue之事件处理
Jul 10 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 #Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 #Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 #Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 #Javascript
css值转换成数值请抛弃parseInt
Oct 24 #Javascript
更优雅的事件触发兼容
Oct 24 #Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 #Javascript
You might like
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
php获取linux命令结果的实例
2017/03/13 PHP
PHP递归的三种常用方式
2019/02/28 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
详解Python中的各种函数的使用
2015/05/24 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
浅谈Python NLP入门教程
2017/12/25 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
车辆转让协议书
2014/04/15 职场文书
高考励志标语
2014/06/05 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
面试复试通知单
2015/04/24 职场文书
大学入学感言
2015/08/01 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
django 认证类配置实现
2021/11/11 Python
DE1103使用报告
2022/04/05 无线电