使用css来美化表单元素时，一直没有好的方法美化文件上传控件。http://www.quirksmode.org/dom/inputfile.html(网站好像出错)提供了美化文件上传控件的方法。本人在该方法的启发之下，结合自己的项目，将其功能更加完善，经过改善之后，其具有以下特点：

1. 用户所见并不是文件上传按钮，而是一个按钮；
2. 可以对图片的格式进行限制；
3. 用户选择的图片可以显示在特定区域之中（IE6、safari、opera除外）；
4. 在用户禁用js的情况下文件上传控件保持可用状态。

本人将其进行封装成一个jQuery插件，因网上已经有一个叫jQuery.fakeFile的插件，为了与其区分开来，我将并将其命名为jQuery.liveFakeFile。这篇文章将介绍该方法的原理和使用方法。

一、需求

需求很简单，但实现起来需要一定得技巧，简述如下：

1. 要求不出现文件上传控件，而是一个“上传图片”的按钮，用户单击该按钮时弹出图片对话框；
2. 选择图片后，图片在按钮上方显示出来，默认情况下，显示默认的图片；
3. 对选择的图片进行格式判断，一旦不符合要求，在按钮下方显示错误信息，并显示默认的图片。

二、分析

实现点击按钮弹出选择图片对话框效果

文本上传控件前面有一输入框，受Michael McGrady(ljzcome曾翻译过此文)的启示，我们创建“上传图片”按钮，然后改变文件上传控件的opacity属性，将其设置为0，并通过定位属性使点击区域位于按钮之上。这样，用户的每一次点击看似是点击的按钮，实则是文本上传控件本身。

显示用户选择的图片

要显示图片看似很简单，但各个浏览器之间存在差异，IE6并不能正确显示图片，IE7可以通过使用滤镜AlphaImageLoder使其显示。而Firefox也不能正常显示图片，但它有一个方法可以使图片显示—getAsDataURL()。其他浏览器opera、safari也不能正常显示图片。所以我们使用浏览器嗅探技术对不同的浏览器分别处理，对不能正常显示图片的浏览器让其显示文字即可。

判断图片格式

只需在触发文件上传控件的change事件时通过正则表达式验证即可，一旦符合格式要求即将图片或提示文字显示出来，否则显示错误提示信息。

可用性分析

因为是通过js来改变文件上传控件的外观，那么就必须保证用户在禁用js的情况下能正常上传图片。所以在html结构中我们放置的应该是正常的文件上传控件。

出处：Denis'Blog
责任编辑：bluehearts

上一页 下一页 使用jQuery改进文件上传控件 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。