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

我之前写过一篇短文，简单介绍了如何定义输入类型='file '的样式。对于一般的表单，上传控件很少，真的很好。既减少了代码，又美化了风格。原文：《定义input type="file" 的样式》其实定义了文件控件的样式，大致思路是一样的。今天看到博客花园里的花，忍不住写了两篇文章研究文件控制《jquery.fileEveryWhere.js--一个跨浏览器的file显示插件》 《firefox下input type="file"的size是多大》。结果花花绿绿，以下内容引用自以上两篇文章：Daniel ppk表示，在多表单控件中，上传文件控件的样式是最难控制的。请参阅文章设置输入类型=“文件”的样式。这个插件也参考了这篇文章。让我们来看看chrome中输入类型='file '的不同表达方式，即firefox和Firefox。

Chrome就像一个按钮标签组合，这似乎有最大的区别。和ie是文本按钮的组合。火狐在外观上更加标准。事实上，firefox有两个潜在的问题：1。火狐目前不支持type='file '的输入宽度定义(但是ff支持size属性，可以为size设置一个值来控制上传框的大小。至于这个大小有多大，请看火狐下的文章樊华-输入类型的大小='file '。2.火狐在提交文件表单时只提交文件名而不提交路径，IE提交路径文件名。chrome也可以提交路径文件名，但只显示文件名。火狐浏览器在提交文件表单时只提交文件名，不提交路径(可惜暂时没有解决方案)。为了使文件在所有浏览器中统一显示，不能再控制纯样式，只能使用js脚本。基本步骤是3: 1，通过文本框和按钮模拟输入type="file "。2.使input='file '透明，并用定位完全覆盖文本框和按钮。3.当输入类型=“文件”的onchange时，使用js将文本框的值设置为输入类型=“文件”的值。了解了步骤之后，整个插件就很容易写了。代码如下：复制代码如下： /* *文件无处不在-浏览器通用文件上传*版权-花忠*[邮件受保护]* http://www.cnblogs.com/flowerszhong/*/(函数($){ $ . fn . file无处不在=函数(选项){ var defaults={ wrappwidth : 300，WrapHeight: 30，ButtonWidth: 60，Height : 28，button text : ' browse '，textheight : 28，text width :var选项=$。扩展(默认值、选项)；var browser _ ver=$ . browser . version . substr(0，1)；var display mode=($ . browser . msie browser _ ver=' 7 ')？内联“:”内联块；返回。每个(函数(){//创建包含，并将其设置为相对定位varwrapper=$(' div class=' file wrapper ' ')。CSS ({'width' :options。包装宽度' px '，'高度' :选项。WrapHeight 'px '、display': displayMode '、zoom': '1 '、position': 'relative '、overflow': 'hidden '、z-index ' : ' 1 ' })；//创建一个文本输入框，用于存储上传的文件名vartext=$(“input class=”filename”type=“text”/)。CSS({ ' width ' : options . text width ' px '，' heigth ' : options . text height ' px ' })；//创建浏览按钮var button=$(' input class=' BTN file ' type=' button '/')。val(options . button text)；$(这个)。包装材料。父项()。追加(文本、按钮)；$(这个)。css({ 'position': 'absolute '，' top': '0 '，' left': '0 '，' z-index': '2 '，' height':选项。WrapHeight 'px '，' width':选项。WrapWidth 'px '、cursor': 'pointer '、opacity': '0.0 '、outline':'0 '、filter ' : ' alpha(opacity 33600)' })；if ($.browser.mozilla) { $(this)。attr('size '，1(选项。WrapWidth - 85)/6.5) } $(这个)。bind('change '，function() { text.val($(this))。val())；});});};})(jQuery)；很容易使用：$(' input 3360 file ')。file everywhere({ parameter })；目前不支持firefox type='file '的输入宽度定义，但是FF支持size属性，所以可以为size设置一个值来控制上传框的大小。但是这个大小值怎么设置，大小='10 '有多宽，默认值是什么，不能凭感觉单独设置。使用脚本检查：复制的代码如下： script type=' text/JavaScript ' $(function(){ var file array=[]；var I=0；while(I 100){ FileArray . push(I ' : input type=' file ' size=' I ' '/br/')；我；} document . write(FileArray . join(“”)；$(“input 3360 file”)。每个(函数(){ $(this))。在(' $(this)之后。width()' ')})；});/script在Firefox下得到这个结果：。

找到了一定的规律，默认值是208像素，而当size='1 '时，就是85像素，而且每个大小的差是6.5像素，所以我们可以动态设置size的值，例如，复制代码如下： if ($。browser.mozilla) {$ (this)。attr ('size '，1 (options.wrap)。