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

原创 2015年07月06日 20:51:54

翻过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。


相关文章推荐

Uploadify在IE下的兼容问题解决

一、在IE9、IE10不能点击的问题解决 解决方法:进入uploadify的js文件中,搜索SWFUpload.prototype.getFlashHTML,找到它对应的语句,将方法全部替换为以下内...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery.uploadify.3.2 试用(同时解决IE9 IE10 按钮无法点击的问题)

以前用的是版本2.1.4,这次看见更新后就尝试了一下,发现有很多改变。 首先引入 js 和 css 当然jquery 是必不可少的 接下来是代码: //文件上传 $(function() {...

uploadify 兼容性问题

最近,项目中需要用到ftp上传文件,然后jsp页面就用到了uploadify这个上传控件,但是这个插件好像很久没有更新了,有一些兼容性问题也没有去解决,需要开发者自己解决。我来讲讲我遇到的ie9和36...

解决uploadify对象不支持此属性或方法

在做Ajax上传时uploadify(v2.1.4)是非常不错的JQuery插件,昨天在家做了好好的页面,到了单位发现总是报“对象不支持此属性或方法”错误,具体出错在“document.getElem...

记录使用了jquery uploadify flash版插件的页面在chrome浏览器崩溃问题的解决方法

在页面上使用了jquery uploadify flash版上传插件,在chrome里页面频繁崩溃,经过一翻折腾,找到问题原因:flash插件冲突,chrome浏览器自带了一个flash插件,可能访问...
  • cschmin
  • cschmin
  • 2015年06月24日 10:23
  • 3419

uploadify上传组件点击uploadify.swf,无法弹出文件选择框的原因及解决方法

项目中用到了jQuery的uploadify上传组件,可是调试代码并没有发现代码哪里写错了。起初以为是模态框遮盖了uploadify.swf,就把style=”position: absolute; ...
  • cs6704
  • cs6704
  • 2015年12月17日 12:11
  • 5179

php和uploadify上传文件出现的问题及解决办法

由于uploadify是基于flash实现的上传功能,f12是看不到后台任何反馈信息的,很不方便调试,uploadify的回调函数onUploadSuccess(file, data, respons...
  • panyox
  • panyox
  • 2016年12月07日 20:28
  • 1247

uploadify插件-支持IE8以下

js代码: $(document).ready(function(){ $('#sendToImg').uploadify({ swf: ctxStatic+'/...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【那些年我们一起挖过的坑】uploadify插件的使用及兼容性
举报原因:
原因补充:

(最多只允许输入30个字)