jQuery.fakeFile插件:网站上传控件

山谷中漫步

山谷中漫步

2016-02-20 00:56

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

使用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结构中我们放置的应该是正常的文件上传控件。

展开更多 50%)
分享

猜你喜欢

jQuery.fakeFile插件:网站上传控件

Web开发
jQuery.fakeFile插件:网站上传控件

网站上传漏洞利用程序

编程语言 网络编程
网站上传漏洞利用程序

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

基于jquery的上传插件Uploadify

Web开发
基于jquery的上传插件Uploadify

酷盘如何使用酷盘网站上传文件

电脑网络
酷盘如何使用酷盘网站上传文件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery上传插件Uploadify使用详解及错误处理

Web开发
JQuery上传插件Uploadify使用详解及错误处理

jQuery 位置插件

Web开发
jQuery 位置插件

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

win10怎么关闭自动更新?

win10怎么关闭自动更新?

JavaScript中的Function对象

JavaScript中的Function对象
下拉加载更多内容 ↓