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 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
javascript object array方法使用详解
Dec 03 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
简单实现js倒计时功能
Feb 13 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 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中Session的概念
2006/10/09 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python基础教程之Hello World!
2014/08/29 Python
python创建关联数组(字典)的方法
2015/05/04 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python进阶篇之字典操作总结
2016/11/16 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python实时监控cpu小工具
2018/06/21 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
事业单位公务员的职业生涯规划
2014/01/15 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang