聊一聊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中的关联数组分析
Apr 09 Javascript
js清理Word格式示例代码
Feb 13 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 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/07/08 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
php实现微信扫码支付
2017/03/26 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
微信小程序入门教程
2016/11/18 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
2013年军训通讯稿
2014/02/05 职场文书
人民教师求职自荐信
2014/03/12 职场文书
商业门面租房协议书
2014/11/25 职场文书
2014年就业工作总结
2014/11/26 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
委托书范本格式
2019/04/18 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python