使用css来美化表单元素时,一直没有好的方法美化文件上传控件。http://www.quirksmode.org/dom/inputfile.html(网站好像出错)提供了美化文件上传控件的方法。本人在该方法的启发之下,结合自己的项目,将其功能更加完善,经过改善之后,其具有以下特点:
用户所见并不是文件上传按钮,而是一个按钮; 可以对图片的格式进行限制; 用户选择的图片可以显示在特定区域之中(IE6、safari、opera除外); 在用户禁用js的情况下文件上传控件保持可用状态。本人将其进行封装成一个jQuery插件,因网上已经有一个叫jQuery.fakeFile的插件,为了与其区分开来,我将并将其命名为jQuery.liveFakeFile。这篇文章将介绍该方法的原理和使用方法。
一、需求
需求很简单,但实现起来需要一定得技巧,简述如下:
要求不出现文件上传控件,而是一个上传图片的按钮,用户单击该按钮时弹出图片对话框; 选择图片后,图片在按钮上方显示出来,默认情况下,显示默认的图片; 对选择的图片进行格式判断,一旦不符合要求,在按钮下方显示错误信息,并显示默认的图片。二、分析
实现点击按钮弹出选择图片对话框效果
文本上传控件前面有一输入框,受Michael McGrady(ljzcome曾翻译过此文)的启示,我们创建上传图片按钮,然后改变文件上传控件的opacity属性,将其设置为0,并通过定位属性使点击区域位于按钮之上。这样,用户的每一次点击看似是点击的按钮,实则是文本上传控件本身。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)显示用户选择的图片
要显示图片看似很简单,但哥哥浏览器之间存在差异,IE6并不能正确显示图片,IE7可以通过使用滤镜AlphaImageLoder使其显示。而Firefox也不能正常显示图片,但它有一个方法可以使图片显示getAsDataURL()。其他浏览器opera、safari也不能正常显示图片。所以我们使用浏览器嗅探技术对不同的浏览器分别处理,对不能正常显示图片的浏览器让其显示文字即可。
判断图片格式
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)只需在触发文件上传控件的change事件时通过正则表达式验证即可,一旦符合格式要求即将图片或提示文字显示出来,否则显示错误提示信息。
可用性分析
因为是通过js来改变文件上传控件的外观,那么就必须保证用户在禁用js的情况下能正常上传图片。所以在html结构中我们放置的应该是正常的文件上传控件。