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 相关文章推荐
JavaScript之编码规范 推荐
May 23 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
jquery实现submit提交表单
Feb 03 Javascript
javascript动画算法实例分析
Jul 31 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
小程序云开发之用户注册登录
May 18 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
layui表格数据重载
Jul 27 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
php数组去除空值函数分享
2015/02/02 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
Python+微信接口实现运维报警
2016/08/27 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
Django自带的用户验证系统实现
2020/12/18 Python
日语系毕业生推荐信
2013/11/11 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
项目投资合作意向书
2014/07/29 职场文书
个人四风对照检查材料
2014/09/26 职场文书
先进个人自荐书
2015/03/06 职场文书
单位考核鉴定意见
2015/06/05 职场文书
物业保洁员管理制度
2015/08/05 职场文书
2016年春节问候语
2015/11/11 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python