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 插件 任意位置浮动固定层
Dec 25 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 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的cms
2010/12/19 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
如何让CI框架支持service层
2014/10/29 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
详解Django中的过滤器
2015/07/16 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Windows下安装Scrapy
2018/10/17 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python实现图片压缩代码实例
2019/08/12 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
应用化学专业职业生涯规划书
2014/01/22 职场文书
项目经理聘任书
2014/03/29 职场文书
公司合作意向书范文
2014/07/30 职场文书
热爱劳动主题班会
2015/08/14 职场文书
2019入党申请书格式
2019/06/25 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python