聊一聊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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
table行随鼠标移动变色示例
May 07 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
前端程序员必须知道的高性能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
Dedecms常用函数解析
2008/02/01 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
基于vue展开收起动画的示例代码
2018/07/05 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
小程序实现tab标签页
2020/11/16 Javascript
python中字典(Dictionary)用法实例详解
2015/05/30 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Python和Go语言的区别总结
2019/02/20 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
高一物理教学反思
2014/01/24 职场文书
品质主管岗位职责
2014/03/16 职场文书
3分钟演讲稿
2014/04/30 职场文书
春节联欢会策划方案
2014/05/16 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
团结友爱主题班会
2015/08/13 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS