uploadify 3.0 详细使用说明


Posted in Javascript onJune 18, 2012

使用:

//绑定的界面元素<input id='gallery'type='file'/> 
$("#gallery").uploadify({ 
设置参数,参数如下. 
});

设置的属性:
id: jQuery(this).attr('id'),//绑定的input的ID 
langFile: 'http://www.static-xxx.nu/uploader/uploadifyLang_en.js',//语言包的路径,能设置所有的提示文字 
swf: 'http://www.static-xxx.nu/uploader/uploadify.swf',//[必须设置]swf的路径 
uploader: '/uploadify/galleri.php',//[必须设置]上传文件触发的url 
auto:false,//文件选择完成后,是否自动上传 
buttonText:'Välj Filer',//上传按钮的文字 
height: 30,//上传按钮的高和宽 
width: 120, 
buttonCursor: 'pointer',//上传鼠标hover后Cursor的形状 
cancelImage: '/upload/201206/20120618142325932.png',//[必须设置]取消图片的路径 
checkExisting:'/uploader/uploadify-check-existing.php',//检查上传文件是否存,触发的url,返回1/0 
debug: true,//debug模式开/关,打开后会显示debug时的信息 
fileObjName:'file', 
fileSizeLimit : 0,//文件的极限大小,以字节为单位,0为不限制。1MB:1*1024*1024 
fileTypeDesc: 'Bild JPG',//允许上传的文件类型的描述,在弹出的文件选择框里会显示 
fileTypeExts: '*.jpg',//允许上传的文件类型,限制弹出文件选择框里能选择的文件 
method: 'post',//和后台交互的方式:post/get 
multi: true,//是否能选择多个文件 
queueID: 'fileQueue',//显示上传文件队列的元素id,可以简单用一个div来显示 
queueSizeLimit : 999,//队列中允许的最大文件数目 
progressData : 'all', // 'percentage''speed''all'//队列中显示文件上传进度的方式:all-上传速度+百分比,percentage-百分比,speed-上传速度 
removeCompleted : true,//上传成功后的文件,是否在队列中自动删除 
removeTimeout: 3, 
requeueErrors : true, 
postData: {},//和后台交互时,附加的参数 
preventCaching : true, 
transparent: true, 
successTimeout : 30,//上传时的timeout 
uploadLimit:999//能同时上传的文件数目

设置的事件:
onDialogClose : function(swfuploadifyQueue) {//当文件选择对话框关闭时触发 
if( swfuploadifyQueue.filesErrored > 0 ){ 

alert( '添加至队列时有' 

+swfuploadifyQueue.filesErrored 

+'个文件发生错误n' 

+'错误信息:' 

+swfuploadifyQueue.errorMsg 

+'n选定的文件数:' 

+swfuploadifyQueue.filesSelected 

+'n成功添加至队列的文件数:' 

+swfuploadifyQueue.filesQueued 

+'n队列中的总文件数量:' 

+swfuploadifyQueue.queueLength); 

} 
} 
onDialogOpen : function() {//当选择文件对话框打开时触发 

alert( 'Open!'); 
} 
onSelect : function(file) {//当每个文件添加至队列后触发 

alert( 'id: ' + file.id 

+ ' - 索引: ' + file.index 

+ ' - 文件名: ' + file.name 

+ ' - 文件大小: ' + file.size 

+ ' - 类型: ' + file.type 

+ ' - 创建日期: ' + file.creationdate 

+ ' - 修改日期: ' + file.modificationdate 

+ ' - 文件状态: ' + file.filestatus); 
} 
onSelectError : function(file,errorCode,errorMsg) {//当文件选定发生错误时触发 

alert( 'id: ' + file.id 

+ ' - 索引: ' + file.index 

+ ' - 文件名: ' + file.name 

+ ' - 文件大小: ' + file.size 

+ ' - 类型: ' + file.type 

+ ' - 创建日期: ' + file.creationdate 

+ ' - 修改日期: ' + file.modificationdate 

+ ' - 文件状态: ' + file.filestatus 

+ ' - 错误代码: ' + errorCode 

+ ' - 错误信息: ' + errorMsg); 
} 
onQueueComplete : function(stats) {//当队列中的所有文件全部完成上传时触发 

alert( '成功上传的文件数: ' + stats.successful_uploads 

+ ' - 上传出错的文件数: ' + stats.upload_errors 

+ ' - 取消上传的文件数: ' + stats.upload_cancelled 

+ ' - 出错的文件数' + stats.queue_errors); 
} 
onUploadComplete : function(file,swfuploadifyQueue) {//队列中的每个文件上传完成时触发一次 

alert( 'id: ' + file.id 

+ ' - 索引: ' + file.index 

+ ' - 文件名: ' + file.name 

+ ' - 文件大小: ' + file.size 

+ ' - 类型: ' + file.type 

+ ' - 创建日期: ' + file.creationdate 

+ ' - 修改日期: ' + file.modificationdate 

+ ' - 文件状态: ' + file.filestatus 

+ ' - 出错的文件数: ' + swfuploadifyQueue.filesErrored 

+ ' - 错误信息: ' + swfuploadifyQueue.errorMsg 

+ ' - 要添加至队列的数量: ' + swfuploadifyQueue.filesSelected 

+ ' - 添加至对立的数量: ' + swfuploadifyQueue.filesQueued 

+ ' - 队列长度: ' + swfuploadifyQueue.queueLength); 
} 
onUploadError : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {//上传文件出错是触发(每个出错文件触发一次) 

alert( 'id: ' + file.id 

+ ' - 索引: ' + file.index 

+ ' - 文件名: ' + file.name 

+ ' - 文件大小: ' + file.size 

+ ' - 类型: ' + file.type 

+ ' - 创建日期: ' + file.creationdate 

+ ' - 修改日期: ' + file.modificationdate 

+ ' - 文件状态: ' + file.filestatus 

+ ' - 错误代码: ' + errorCode 

+ ' - 错误描述: ' + errorMsg 

+ ' - 简要错误描述: ' + errorString 

+ ' - 出错的文件数: ' + swfuploadifyQueue.filesErrored 

+ ' - 错误信息: ' + swfuploadifyQueue.errorMsg 

+ ' - 要添加至队列的数量: ' + swfuploadifyQueue.filesSelected 

+ ' - 添加至对立的数量: ' + swfuploadifyQueue.filesQueued 

+ ' - 队列长度: ' + swfuploadifyQueue.queueLength); 
} 
onUploadProgress : function(file,fileBytesLoaded,fileTotalBytes, 
queueBytesLoaded,swfuploadifyQueueUploadSize) {//上传进度发生变更时触发 
alert( 'id: ' + file.id 

+ ' - 索引: ' + file.index 

+ ' - 文件名: ' + file.name 

+ ' - 文件大小: ' + file.size 

+ ' - 类型: ' + file.type 

+ ' - 创建日期: ' + file.creationdate 

+ ' - 修改日期: ' + file.modificationdate 

+ ' - 文件状态: ' + file.filestatus 

+ ' - 当前文件已上传: ' + fileBytesLoaded 

+ ' - 当前文件大小: ' + fileTotalBytes 

+ ' - 队列已上传: ' + queueBytesLoaded 

+ ' - 队列大小: ' + swfuploadifyQueueUploadSize); 
} 
onUploadStart: function(file) {//上传开始时触发(每个文件触发一次) 

alert( 'id: ' + file.id 

+ ' - 索引: ' + file.index 

+ ' - 文件名: ' + file.name 

+ ' - 文件大小: ' + file.size 

+ ' - 类型: ' + file.type 

+ ' - 创建日期: ' + file.creationdate 

+ ' - 修改日期: ' + file.modificationdate 

+ ' - 文件状态: ' + file.filestatus ); 
} 
onUploadSuccess : function(file,data,response) {//上传完成时触发(每个文件触发一次) 

alert( 'id: ' + file.id 

+ ' - 索引: ' + file.index 

+ ' - 文件名: ' + file.name 

+ ' - 文件大小: ' + file.size 

+ ' - 类型: ' + file.type 

+ ' - 创建日期: ' + file.creationdate 

+ ' - 修改日期: ' + file.modificationdate 

+ ' - 文件状态: ' + file.filestatus 

+ ' - 服务器端消息: ' + data 

+ ' - 是否上传成功: ' + response); 
}
Javascript 相关文章推荐
html下载本地
Jun 19 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
JS实现公告上线滚动效果
Jan 10 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 #Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 #Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 #Javascript
jQuery操作input type=radio的实现代码
Jun 14 #Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 #Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 #Javascript
jQuery操作select的实例代码
Jun 14 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
在Python中marshal对象序列化的相关知识
2015/07/01 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
django中related_name的用法说明
2020/05/20 Python
PyQt5实现画布小程序
2020/05/30 Python
Python包和模块的分发详细介绍
2020/06/19 Python
如何表示python中的相对路径
2020/07/08 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
python基于opencv实现人脸识别
2021/01/04 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
护士毕业自我鉴定
2014/02/07 职场文书
反邪教标语
2014/06/23 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
开幕式邀请函
2015/01/31 职场文书
酒店温馨提示语
2015/07/14 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
导游词之湖北武当山
2019/09/23 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server