关闭

【那些年我们一起挖过的坑】uploadify插件的使用及兼容性

2699人阅读 评论(0) 收藏 举报
分类:

翻过IE8~11四座大山,终于进入了Firefox的森林。

 

Uploadify,多文件异步上传插件,能够显示文件上传进度,支持主流web开发(javaphp.net)。其核心是插件里的swf文件,封装了flash进行文件上传。因此,如果你的用户群体不方便或者不能够安装Flash插件,那就跳过此插件,寻找别的解决方案。当然,该插件的开发团队也与时俱进,推出了HTML5版本。而Flash版本,在不同的浏览器里存在很大的使用和兼容问题。本文就记录下上传插件uploadify在兼容性道路上的那些坑。

 

Step1:检查demo机是否安装Flash插件。

方式有很多,就介绍其中的两种。1、控制面板查找Flash2、直接登录视频网站,爱奇艺或优酷或其他均可,如果能够正常观看视频(非H5),那就是正常安装了。注意方式2验证完请关闭网站回到该文继续欣赏。

如果检查完毕,发现没有安装,需要根据你浏览器类别,浏览器版本来进行下载对应的Flash版本,这也就是该插件的一大坑,Flash插件强关联操作系统,强关联浏览器类别,强关联具体某一类浏览器的版本。如,实际兼容Firefox4.0过程中,Flash版本对应Flash for Firefox 10,其他的版本安装上也不能使用。即IEFirefoxchrome需要下载不同的Flash安装。

 

Step2:奇葩版本IE9

IE9之上版本,可能会由于文档模式过低导致插件Flash初始化失败。尤其是IE9下,该插件的不稳定性问题最多,建议如果用户群主要使用IE9,最好不要使用该插件。因此,代码里需要加上<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>,默认到IE8文档模式。而此代码非强制执行,所以FAQ里还需要加上相关问题申明。此为坑之二。当然,IE9下还有object对应的id等问题,都归为此坑。


Step3Firefox兼容问题。

在项目中,处于安全性考虑,每次请求必然会做合法性校验,即请求经过相关过滤器,而登录过滤器会根据sessionid获取用户session登录信息。而Firefox使用Flash上传文件时,Flash本身的bug导致提交时不会带上session cookie,而HTTP是无状态请求,session的存在以客户端和服务端的交换标志而延续。而sessionsessionid是存储在cookie中的,导致请求不合法。官方问题说明:http://www.uploadify.com/documentation/uploadify/using-sessions-with-uploadify/,即采用插件自身的formData 属性实现,

解决方式一demo代码如下:




解决方式二:

在原有请求后加上“;jsessionid=${pageContext.session.id}”

 

Adobe官方对于该问题的阐述:

A FileReference.upload() currently does not use the same cookies as your browser session if you are using Firefox (on Windows). In such cases, cookie information has to be inserted manually.

 

更深剖析请看:http://lync.in/session-trap-on-uploading-files-using-flash-in-firefox/

 

Step4:关于插件样式修改。

对于原生的上传插件样式,的确是比较丑,因此自定义样式必不可少。介绍两种方式。

1、通过插件自身接口,buttonClass,buttonImage等,具体请查api。

2、在onInit初始化插件的事件里,将原来根据js、css生成的样式全部重写,细节参考源码。

 

Step5:调试。

打开debug属性,因为输出信息是到固定点才会输出,因此,如果之间抛出了异常则会很难定位。如Firefox4.0使用最新的Flash,在初始化时是会抛出异常而导致无法准确定位。因此使用硕思闪客精灵反编译swf文件,查看逻辑代码结合实际输出结果进行推理。

 

坑之一整理完毕,End。


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3409次
    • 积分:72
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档