基于jquery跨浏览器显示的file上传控件


Posted in Javascript onOctober 24, 2011

前面我写过一篇短小的文章,简要的介绍了下怎样定义input type="file" 的样式。对于一般的表单,上传控件较少,这样的做法确实不错,既减少了代码,又美化了样式,原文:《定义input type="file" 的样式》

其实要实现给file控件定义样式,大致思想都是一样的。

今天看到博客园的繁花连写两篇文章来研究file控件
《jquery.fileEveryWhere.js--一个跨浏览器的file显示插件》
《firefox下input type="file"的size是多大》

我这里也按捺不住了。成果是繁花的,以下内容引用自上面两篇文章:

大牛ppk都说过,在从多表单控件中,上传文件控件的样式是最难以控制的。见文章Styling an input type="file"。本插件也多是参考此文。

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

基于jquery跨浏览器显示的file上传控件
基于jquery跨浏览器显示的file上传控件
基于jquery跨浏览器显示的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 
* http://www.cnblogs.com/flowerszhong/ 
*/ 
(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({参数});

firefox对type="file" 的input的width定义目前是不支持的,但是FF支持size属性,可以给size设置一个值,来控制上传框的大小。
但是这个size值怎么设置,size="10"是多宽,默认值又是多少,不能光凭感觉去设置。 用脚本来查看下:

<script type="text/javascript"> 
$(function() { 
var fileArray = []; 
var i = 0; 
while (i < 100) { 
fileArray.push(i + ":<input type='file' size='" + i + "' /><br />"); 
i++; 
} 
document.write(fileArray.join("")); 
$("input:file").each(function() { $(this).after("<b>" + $(this).width() + "</b>") }); 
}); 
</script>

在火狐下得到这样的结果:
基于jquery跨浏览器显示的file上传控件

发现了一定的规律,默认为208像素,size="1"时为85像素,每个size之间相差6.5个像素的宽度,所以我们可以动态的设定size的值,如:

if ($.browser.mozilla) { $(this).attr("size", 1 + (options.WrapWidth - 85) / 6.5)
Javascript 相关文章推荐
javascript string字符串优化问题
Jul 31 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
firefox下input type=&quot;file&quot;的size是多大
Oct 24 #Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 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
You might like
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python WSGI的深入理解
2018/08/01 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
工商管理专业应届生求职信
2013/11/04 职场文书
物业工作计划书
2014/01/10 职场文书
师德学习感言
2014/01/31 职场文书
推荐信格式要求
2014/05/09 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫