uploadify插件的使用及兼容性
翻过IE8~11四座大山,终于进入了Firefox的森林。
Uploadify,多文件异步上传插件,能够显示文件上传进度,支持主流web开发(java、php、.net)。其核心是插件里的swf文件,封装了flash进行文件上传。因此,如果你的用户群体不方便或者不能够安装Flash插件,那就跳过此插件,寻找别的解决方案。当然,该插件的开发团队也与时俱进,推出了HTML5版本。而Flash版本,在不同的浏览器里存在很大的使用和兼容问题。本文就记录下上传插件uploadify在兼容性道路上的那些坑。
Step1:检查demo机是否安装Flash插件。
方式有很多,就介绍其中的两种。1、控制面板查找Flash。2、直接登录视频网站,爱奇艺或优酷或其他均可,如果能够正常观看视频(非H5),那就是正常安装了。注意方式2验证完请关闭网站回到该文继续欣赏。
如果检查完毕,发现没有安装,需要根据你浏览器类别,浏览器版本来进行下载对应的Flash版本,这也就是该插件的一大坑,Flash插件强关联操作系统,强关联浏览器类别,强关联具体某一类浏览器的版本。如,实际兼容Firefox4.0过程中,Flash版本对应Flash for Firefox 10,其他的版本安装上也不能使用。即IE,Firefox,chrome需要下载不同的Flash安装。
Step2:奇葩版本IE9。
IE9之上版本,可能会由于文档模式过低导致插件Flash初始化失败。尤其是IE9下,该插件的不稳定性问题最多,建议如果用户群主要使用IE9,最好不要使用该插件。因此,代码里需要加上<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>,默认到IE8文档模式。而此代码非强制执行,所以FAQ里还需要加上相关问题申明。此为坑之二。当然,IE9下还有object对应的id等问题,都归为此坑。
Step3:Firefox兼容问题。
在项目中,处于安全性考虑,每次请求必然会做合法性校验,即请求经过相关过滤器,而登录过滤器会根据sessionid获取用户session登录信息。而Firefox使用Flash上传文件时,Flash本身的bug导致提交时不会带上session cookie,而HTTP是无状态请求,session的存在以客户端和服务端的交换标志而延续。而session的sessionid是存储在cookie中的,导致请求不合法。官方问题说明:http://www.uploadify.com/documentation/uploadify/using-sessions-with-uploadify/,即采用插件自身的formData 属性实现,
解决方式一demo代码如下:
$("").uploadify({
'formData' : {'ASPSESSID':$("#sessionId").val()}
});
<input type="hidden" id="sessionId" value="${pageContext.session.id}" />
解决方式二:
在原有请求后加上
“;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。