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

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。