聊一聊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 相关文章推荐
jquery nth-child()选择器的简单应用
Jul 10 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
前端程序员必须知道的高性能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数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
Three.js基础学习教程
2017/11/16 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
python操作日期和时间的方法
2014/03/11 Python
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
python树莓派红外反射传感器
2019/01/21 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
大学生职业生涯规划范文
2014/01/22 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
村居抓节水倡议书
2014/05/19 职场文书
医学求职信
2014/05/28 职场文书
项目经理任命书
2014/06/04 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
小学老师对学生的评语
2014/12/29 职场文书
个人年度总结报告
2015/03/09 职场文书
初中语文教学研修日志
2015/11/13 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python