聊一聊jQuery插件uploadify使用方法


Posted in Javascript onAugust 24, 2016

说说自己使用uploadify的一波三折的曲折过程: 

之所以要选择uploadify,是源于自己先前使用过jQuery官网的上传文件插件,比较难用(页面写的代码比较多,IE下后台回传需要配置格式【不清楚其他上传插件是否也是这样】),而且一直有IE9上传不成功的问题,到我离开上家公司的时候也一直没有解决这个问题(可能是本人比较low的原因吧)。所以在使用插件之前先调研了一下。uploadify提供两个版本,flash的uploadify和html5的uploadFive。文档还是比较齐全的,网上的使用例子页比较多,配置页比较简单,所以第一选择就是他了。

1.初体验
uploadify的flash版本免费,而且根据以往的经验所有浏览器都支持flash的(这是悲剧的开始),所以计划只使用这个版本就行。
产品给的效果如下(有三个图片预览框,每一张图片有对应的描述,所以不能用一个上传按钮,每一个上传按钮上传对应的图片) 

聊一聊jQuery插件uploadify使用方法

配置完毕后chrome自测通过(中间有个小曲折,产品那边想要多张图片一起上传,当时没有找到IE8展示的处理。后面再网上找到了一篇,然后录了下来图片上传前预览)。

要测试各个浏览器的情况,在Firefox上一看,我晕,Firefox最新的版本根本没有自带flash插件,结果就是连file input的样式都没有更改,完全没有作用。先前是想加入一段dom 

<object data="xxx.swf"  height="0" width="0"></object>

让浏览器检测到有flash文件弹出安装flash的提示。后来想一想不行啊,为了上传个文件让用户去装flash,太复杂了。

最后决定判断让支持html5的使用uploadiFive上传,不支持的才使用uploadify(flash)版本上传。
if(window.applicationCache){//支持html5        
在配置uploadify的过程中遇到两个问题:
1.file input元素是有name属性的,但是使用flash后需要手动传递过去,也就是fileObjName这个属性,配置uploadiFive也需要传递这个name。
2.fileSizeLimit设置文件大小貌似没有起到作用。最后只能自己验证(onSelect事件中验证),验证失败也需要自己处理取消上传(因为我是配置了自动上传的'auto': true)

//swf上传需要在onUploadError处理这个失败
$('#' + opts.fileObjName).uploadify('cancel');

执行取消后还需要在onUploadError事件中截取这个取消事件导致触发视为onUploadError事件

'onUploadError': function(file, errorCode, errorMsg, errorString) {
 if(errorCode != -280){//取消上传的错误码是-280
 $.dialog.error('上传失败,请重试',{txtYes: '我知道了'});
 } 
 }

下面是我的uploadify的配置 

/*
依赖于jQuery和$.dialog
opts = {
 fileObjName:'idCardPositive',
 swf: 'uploadify/uploadify.swf',
 showProgress: function(progress){},//progress:0-1
 checkFile: function(file){},
 normalOnSelect: function(){},
 normalUploaded: function(id,data),
 positionClass: 'file-btn-left',
}
*/
function init(opts){
 var maxSize = 5242880;//1024 * 1024 * 5,5M
 $('#' + opts.fileObjName).uploadify({
 'fileSizeLimit ': maxSize,
 'multi': false,//每次只能选择一个文件
 'auto': true,/*如果是自动上传,那上传按钮将没用了*/
 'fileTypeExts': '*.jpg;*.bmp;*.jpeg;*.png',
 'fileTypeDesc': '请选择图像或者视频',
 'queueID': 'fileQueue',
 'width': 200,
 'height': 140,
 'buttonText': '',
 'fileObjName': opts.fileObjName,//需要修改文件名称
 'swf': opts.swf,
 'uploader': '/pcapi/user/uploadUserChangeCardImage.htm',
 'onSelect' : function(file) {
 //有name表示是swf格式文件上传,html5文件上传参数请参考http://www.uploadify.com/documentation/uploadifive/onselect-2/
 //需要检测文件类型和大小
 if(opts.checkFile(file)){
 opts.normalOnSelect(opts.positionClass);
 }else{
 //swf上传需要在onUploadError处理这个失败
 $('#' + opts.fileObjName).uploadify('cancel');
 }
 },
 'onUploadProgress': function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
 opts.showProgress(bytesUploaded/bytesTotal); 
 },
 'onUploadError': function(file, errorCode, errorMsg, errorString) {
 if(errorCode != -280){//取消上传的错误码是-280
 $.dialog.error('上传失败,请重试',{txtYes: '我知道了'});
 } 
 },
 'onUploadSuccess': function(file, data) {
 opts.normalUploaded(opts.fileObjName,data);
 }
 });
}

在配置uploadiFive的时候遇到一个问题:

1.fileTypeExts设置为“*.jpg;*.bmp;*.jpeg;*.png”,但实际上所有的图片格式都可以选择。所以只能在选择图片后自己手动检测格式。而且由于onSelect的参数queue没有文件类型信息:点击查看。所以只能在onAddQueueItem事件中检测,然后在onSelect中取消上传队列queue来取消文件的自动上传 

'onAddQueueItem': function(file) {//html5需要自己检测格式和大小
 fileCheckResult = opts.checkFile(file);
 },
 'onSelect' : function(queue) {
 if(fileCheckResult){
 opts.normalOnSelect(opts.positionClass);
 }else{
 $('#' + opts.fileObjName).uploadifive('clearQueue');
 }
 },

可能还有一个问题是需要配置'fileType': 'image/*',因为我直接设置了,不知道不设置会不会有问题,没试

下面是我的uploadiFive配置 

/*
依赖于jQuery和$.dialog
opts = {
 fileObjName:'idCardPositive',//name和id相同
 showProgress: function(progress){},//progress:0-1
 checkFile: function(file){},
 normalOnSelect: function(positionClass){},
 normalUploaded: function(id,data),
 positionClass: 'file-btn-left',
}
*/
function init(opts){
 var fileCheckResult = true;
 var maxSize = 5242880;//1024 * 1024 * 5,5M
 $('#' + opts.fileObjName).uploadifive({
 'fileSizeLimit ': maxSize,
 'multi': false,//每次只能选择一个文件
 'auto': true,/*如果是自动上传,那上传按钮将没用了*/
 'fileTypeExts': '*.jpg;*.bmp;*.jpeg;*.png',
 'fileTypeDesc': '请选择图像或者视频',
 'queueID': 'fileQueue',
 'width': 200,
 'height': 140,
 'buttonText': '',
 'fileObjName': opts.fileObjName,//需要修改文件名称
 'dnd': false,//不允许拖拽
 'fileType': 'image/*',
 'uploadScript': '/pcapi/user/uploadUserChangeCardImage.htm',
 'onAddQueueItem': function(file) {//html5需要自己检测格式和大小
 fileCheckResult = opts.checkFile(file);
 },
 'onSelect' : function(queue) {
 if(fileCheckResult){
 opts.normalOnSelect(opts.positionClass);
 }else{
 $('#' + opts.fileObjName).uploadifive('clearQueue');
 }
 },
 'onProgress': function(file, e) {
 opts.showProgress(e.loaded / e.total);
 },
 'onError': function(file, errorCode, errorMsg, errorString) {
 $.dialog.error('上传失败,请重试',{txtYes: '我知道了'});
 },
 'onUploadComplete': function(file, data) {
 opts.normalUploaded(opts.fileObjName,data);
 }
 });
}
 

2.当头棒喝
本地测试OK以后,放到测试环境上去测试,马上被震惊了。
遇到的第一个问题就是在IE下很多时候点击没有反应(没有弹出文件选择框),找了半天原因终于找到了:必须在文档准备完全的时候再去初始化uploadify,而且确保上传input是可用的(非display:none)
好了,可以选择文件了,但是选择文件以后IE8/9总是抛出call to startUpload failed异常,去网上查了一下,主要有几个原因

1).而是可能有多个上传的div或者input(含有相同的name或者ID)导致的,如果有两个不同的上传按钮,那么他们的name,id要设置得不一样。

这个不是什么tab的问题,而是可能有多个上传的div或者input(含有相同的name或者ID)导致的
如果有两个不同的上传按钮,那么他们的name,id要设置得不一样。 

<div id='total'> 
 <input type="file" name="total_upload" id="total_upload" multiple="true" />
</div> 
<a href="javascript:$('#total_upload').uploadify('upload', '*')">开始上传</a> 
<a href="javascript:$('#total_upload').uploadify('cancel', '*')">全部取消上传</a>

2).flash跨域导致(flash上传源码文件和页面所在的域不同【静态资源现在统一放在static.xxx.com服务器下】)。我的原因是这个,我按照网上说的使用在服务器的根目录(主域名所在工程的根目录)下防止了crossdomain.xml,但是很遗憾没有管用(可能因为我们使用的服务器不是Apache服务器吧,网上有童鞋通过这个方案解决了这个跨域问题)。最终我的解决方案是不让其跨域,我将uploadify资源放在了主域名所在工程的根目录下,然后请求这个目录下的uploadify.swf文件。好了,最终终于能够上传文件了。

最终是解决了上传的问题,花费的时间也不少,记录下来,希望后面有用uploadify的童鞋能够少走一些弯路。

Javascript 相关文章推荐
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 #Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 #Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 #Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 #Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 #Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 #Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 #Javascript
You might like
php 生成随机验证码图片代码
2010/02/08 PHP
php printf输出格式使用说明
2010/12/05 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python os用法总结
2018/06/08 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
投标保密承诺书
2014/05/19 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
作弊检讨书
2015/01/27 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Promise面试题详解之控制并发
2021/05/14 面试题
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
基于Python实现nc批量转tif格式
2022/08/14 Python