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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
javascript实现支付宝滑块验证码效果
Jul 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
最佳的addEvent事件绑定是怎样诞生的
Oct 24 #Javascript
关于javascript function对象那些迷惑分析
Oct 24 #Javascript
You might like
PHP新手上路(十一)
2006/10/09 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
Python的math模块中的常用数学函数整理
2016/02/04 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Python加速程序运行的方法
2020/07/29 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
善意的谎言事例
2014/02/15 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
nginx配置之并发频次限制
2022/04/18 Servers