使用css来美化表单元素时,一直没有好的方法美化文件上传控件。http://www.quirksmode.org/dom/inputfile.html(网站好像出错)提供了美化文件上传控件的方法。本人在该方法的启发之下,结合自己的项目,将其功能更加完善,经过改善之后,其具有以下特点:
用户所见并不是文件上传按钮,而是一个按钮; 可以对图片的格式进行限制; 用户选择的图片可以显示在特定区域之中(IE6、safari、opera除外); 在用户禁用js的情况下文件上传控件保持可用状态。本人将其进行封装成一个jQuery插件,因网上已经有一个叫jQuery.fakeFile的插件,为了与其区分开来,我将并将其命名为jQuery.liveFakeFile。这篇文章将介绍该方法的原理和使用方法。
一、需求
需求很简单,但实现起来需要一定得技巧,简述如下:
要求不出现文件上传控件,而是一个上传图片的按钮,用户单击该按钮时弹出图片对话框; 选择图片后,图片在按钮上方显示出来,默认情况下,显示默认的图片; 对选择的图片进行格式判断,一旦不符合要求,在按钮下方显示错误信息,并显示默认的图片。