说说自己使用uploadify的一波三折的曲折过程:
之所以要选择uploadify,是源于自己先前使用过jQuery官网的上传文件插件,比较难用(页面写的代码比较多,IE下后台回传需要配置格式【不清楚其他上传插件是否也是这样】),而且一直有IE9上传不成功的问题,到我离开上家公司的时候也一直没有解决这个问题(可能是本人比较low的原因吧)。所以在使用插件之前先调研了一下。uploadify提供两个版本,flash的uploadify和html5的uploadFive。文档还是比较齐全的,网上的使用例子页比较多,配置页比较简单,所以第一选择就是他了。
1.初体验
uploadify的flash版本免费,而且根据以往的经验所有浏览器都支持flash的(这是悲剧的开始),所以计划只使用这个版本就行。 产品给的效果如下(有三个图片预览框,每一张图片有对应的描述,所以不能用一个上传按钮,每一个上传按钮上传对应的图片)配置完毕后chrome自测通过(中间有个小曲折,产品那边想要多张图片一起上传,当时没有找到IE8展示的处理。后面再网上找到了一篇,然后录了下来)。
要测试各个浏览器的情况,在Firefox上一看,我晕,Firefox最新的版本根本没有自带flash插件,结果就是连file input的样式都没有更改,完全没有作用。先前是想加入一段dom
让浏览器检测到有flash文件弹出安装flash的提示。后来想一想不行啊,为了上传个文件让用户去装flash,太复杂了。
最后决定判断让支持html5的使用uploadiFive上传,不支持的才使用uploadify(flash)版本上传。
执行取消后还需要在onUploadError事件中截取这个取消事件导致触发视为onUploadError事件
下面是我的uploadify的配置 在配置uploadiFive的时候遇到一个问题:
1.fileTypeExts设置为“*.jpg;*.bmp;*.jpeg;*.png”,但实际上所有的图片格式都可以选择。所以只能在选择图片后自己手动检测格式。而且由于onSelect的参数queue没有文件类型信息:点击查看。所以只能在onAddQueueItem事件中检测,然后在onSelect中取消上传队列queue来取消文件的自动上传 可能还有一个问题是需要配置'fileType': 'image/*',因为我直接设置了,不知道不设置会不会有问题,没试
下面是我的uploadiFive配置 1).而是可能有多个上传的div或者input(含有相同的name或者ID)导致的,如果有两个不同的上传按钮,那么他们的name,id要设置得不一样。 这个不是什么tab的问题,而是可能有多个上传的div或者input(含有相同的name或者ID)导致的
如果有两个不同的上传按钮,那么他们的name,id要设置得不一样。
2.当头棒喝
本地测试OK以后,放到测试环境上去测试,马上被震惊了。
遇到的第一个问题就是在IE下很多时候点击没有反应(没有弹出文件选择框),找了半天原因终于找到了: