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