jquery.fileEveryWhere.js 一个跨浏览器的file显示插件


Posted in Javascript onOctober 24, 2011

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

jquery.fileEveryWhere.js 一个跨浏览器的file显示插件 

 jquery.fileEveryWhere.js 一个跨浏览器的file显示插件

jquery.fileEveryWhere.js 一个跨浏览器的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 
*/ 
(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({参数});

这样就可以统一显示input="file",并且易于美化。
下载该插件:jquery.fileEveryWhere.rar
来自:http://www.cnblogs.com/flowerszhong/

Javascript 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
js添加事件的通用方法推荐
May 15 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
js实现下拉菜单效果
Mar 01 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 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
最佳的addEvent事件绑定是怎样诞生的
Oct 24 #Javascript
关于javascript function对象那些迷惑分析
Oct 24 #Javascript
You might like
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
Javascript 二维数组
2009/11/26 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
学校联谊活动方案
2014/02/15 职场文书
《长相思》听课反思
2014/04/10 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python