jquery上传插件uploadify参数详细分析

简介:

175340161.jpg

UploadifyVersion 3.2

官网:http://www.uploadify.com/

注:文件包里有两个js分别是:jquery.uploadify.js 和 jquery.uploadify.min.js,两者其实一样,只需载入其中一个js即可。很明显jquery.uploadify.min.js是封装好了的,开发人员推荐使用前者。



Options选项设置

auto    选择文件后自动上传
buttonClass    给“浏览按钮”加css的class样式
buttonCursor    鼠标移上去形状:arrow箭头、hand手型(默认)
buttonImage    鼠标移上去变换图片
buttonText    按钮文字
checkExisting    在目录中检查文件是否已上传成功(1 ture,0 false)
debug        是否显示调试框(默认不显示false)
fileObjName    设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata,$tempFile = $_FILES['Filedata']['tmp_name']
fileSizeLimit    设置允许上传文件最大值B, KB, MB, GB 比如:'fileSizeLimit' : '20MB'
fileTypeDesc    选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认:All Files
fileTypeExts    允许上传的文件类型。格式:'fileTypeExts' : '*.gif; *.jpg; *.png'
formData    附带值,需要通过get or post传递的额外数据,需要结合onUploadStart事件一起使用
height        “浏览按钮”高度px
itemTemplate    <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。
method        上传方式。默认:post
multi        选择文件时是否可以【选择多个】。默认:可以true
overrideEvents    不执行默认的onSelect事件
preventCaching    随机缓存值 默认true ,可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突
progressData    进度条上显示的进度:有百分比percentage和速度speed。默认百分比
queueID        给“进度条”加背景css的ID样式。文件选择后的容器ID
queueSizeLimit    允许多文件上传的数量。默认:999
removeCompleted    上传完成后队列是否自动消失。默认:true
removeTimeout    上传完成后队列多长时间后消失。默认 3秒    需要:'removeCompleted' : true,时使用
requeueErrors    队列上传出错,是否继续回滚队列,即反复尝试上传。默认:false
successTimeout    上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认:30秒
swf        swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略
uploader    上传处理程序URL,本参数不可省略
uploadLimit    限制总上传文件数,默认是999。指同一时间,如果关闭浏览器后重新打开又可上传。
width        “浏览按钮”宽度px

Events 事件
onCancel    当取消一个上传队列中的文件时触发,删除时触发 
onClearQueue    清除队列。当'cancel'方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数(另外的按钮)
onDestroy    取消所有的上传队列(另外的按钮)
onDialogClose    当选择文件对话框关闭时触发,不论是点的'确定'还是'取消'都会触发.如果本事件被添加进了'overrideEvents'参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出
onDialogOpen    当选择文件框被打开时触发,没有传过来的参数
onDisable    关闭上传
onEnable    开启上传
onFallback    检测FLASH失败调用
onInit        每次初始化一个队列时触发
onQueueComplete    当队列中的所有文件上传完成时触发
onSelect    当文件从浏览框被添加到队列中时触发
onSelectError    选择文件出错时触发
onSWFReady    flash准备好时触发
onUploadComplete当一个文件上传完成时触发
onUploadError    当文件上传完成但是返回错误时触发
onUploadProgress上传汇总
onUploadStart    一个文件上传之间触发(
动态改变参数的值,此方法很重要,当在多文件跨服务器上传时,你要给每个文件赋值不同的OnlyKey,即修改formData数据,服务器上的文件和数据库的OnlyKey一致,必须用到此方法)

onUploadSuccess    每个上传完成并成功的文件都会触发本事件

Methods 方法
cancel        取消一个上传队列
destroy        取消所有上传队列
disable        禁止点击“浏览按钮”
settings    返回或修改一个 uploadify实例的settings值
stop        停止当前的上传并重新添加到队列中去
upload        上传指定的文件或者所有队列中的文件


uploadify多文件上传例子:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< htmlxmlns = "http://www.w3.org/1999/xhtml" >
< head >
< metahttp-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title >uploadify 多文件上传例子</ title >
< scriptsrc = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type = "text/javascript" ></ script >
< scriptsrc = "jquery.uploadify-3.1.min.js" type = "text/javascript" ></ script >
< linkrel = "stylesheet" type = "text/css" href = "uploadify.css" >
< styletype = "text/css" >
body {
     font: 13px Arial, Helvetica, Sans-serif;
}
.haha{
     color:#FFFFFF;
}
#queue {
     background-color: #FFF;
     border-radius: 3px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.25);
     height: 103px;
     margin-bottom: 10px;
     overflow: auto;
     padding: 5px 10px;
     width: 300px;
}
</ style >
</ head >
< body >
< h1 >Uploadify Demo</ h1 >
< form >
< divid = "queue" ></ div >
< inputid = "file_upload" name = "file_upload" type = "file" multiple = "true" >
</ form >
< scripttype = "text/javascript" >
         $(function() {
             $('#file_upload').uploadify({
                 'debug'         : false,
                 'auto'          : true,             //是否自动上传,
                 'buttonClass'   : 'haha',           //按钮辅助class
                 'buttonText'    : '上传图片',       //按钮文字
                 'height'        : 30,               //按钮高度
                 'width'         : 100,              //按钮宽度
                 'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false
                 'fileObjName'   : 'files',           //默认 Filedata, $_FILES控件名称
                 'fileSizeLimit' : '1024KB',          //文件大小限制 0为无限制 默认KB
                 'fileTypeDesc'  : 'All Files',       //图片选择描述
                 'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件后缀限制 默认:'*.*'
  'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式
// 'formData':{ 'albumid':$("#albumid").val() },
//'overrideEvents': ['onUploadProgress'],  // The progress will not be updated
                 //'progressData' : 'speed',             //默认percentage 进度显示方式
                 'queueID'       : 'queue',              //默认队列ID
                 'queueSizeLimit': 20,                   //一个队列上传文件数限制
                 'removeCompleted' : true,               //完成时是否清除队列 默认true
                 'removeTimeout'   : 3,                  //完成时清除队列显示秒数,默认3秒
                 'requeueErrors'   : false,              //队列上传出错,是否继续回滚队列
                 'successTimeout'  : 5,                  //上传超时
                 'uploadLimit'     : 99,                 //允许上传的最多张数
                 'swf'  : 'uploadify.swf', //swfUpload
                 'uploader': 'uploadify.php', //服务器端脚本
                 //修改formData数据
                 'onUploadStart' : function(file) {
                     //$("#file_upload").uploadify("settings", "someOtherKey", 2);
                 },
   //'onUploadStart' : function(file) {          //  $("#perpic").uploadify("settings","formData",{"albumid":$("#albumid").val()});    // },
                 //删除时触发
                 'onCancel' : function(file) {
                     //alert('The file ' + file.name + '--' + file.size + ' was cancelled.');
                 },
                 //清除队列
                 'onClearQueue' : function(queueItemCount) {
                     //alert(queueItemCount + ' file(s) were removed from the queue');
                 },
                 //调用destroy是触发
                 'onDestroy' : function() {
                     alert('我被销毁了');
                 },
                 //每次初始化一个队列是触发
                 'onInit' : function(instance){
                     //alert('The queue ID is ' + instance.settings.queueID);
                 },
                 //上传成功
                 'onUploadSuccess' : function(file, data, response) {
                     //alert(file.name + ' | ' + response + ':' + data);
                 },
                 //上传错误
                 'onUploadError' : function(file, errorCode, errorMsg, errorString) {
                     //alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
                 },
                 //上传汇总
                 'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
                     $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');
                 },
                 //上传完成
                 'onUploadComplete' : function(file) {
                     //alert('The file ' + file.name + ' finished processing.');
                 },
             });
         });
         //变换按钮
         function changeBtnText() {
             $('#file_upload').uploadify('settings','buttonText','继续上传');
         }
         //返回按钮
         function returnBtnText() {
             alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
         }
</ script >
< h4 >操作:</ h4 >
< ahref = "javascript:$('#file_upload').uploadify('upload', '*');" >开始上传</ a >  | 
< ahref = "javascript:$('#file_upload').uploadify('cancel', '*');" >清除队列</ a >  | 
< ahref = "javascript:$('#file_upload').uploadify('destroy');" >销毁上传</ a >  | 
< ahref = "javascript:$('#file_upload').uploadify('disable', true);" >禁用上传</ a >  | 
< ahref = "javascript:$('#file_upload').uploadify('disable', false);" >激活上传</ a >  | 
< ahref = "javascript:$('#file_upload').uploadify('stop');" >停止上传</ a >  | 
< ahref = "changeBtnText();" < /span>>变换按钮</ a >  | 
< h4 >大小:</ h4 >
< divid = 'progress' ></ div >
</ body >
</ html >






注意:此插件不支持断点续传




      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1047084,如需转载请自行联系原作者







相关文章
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
16天前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
16 1
|
25天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
18天前
|
JavaScript PHP Perl
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
|
2月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
29 0
|
2月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
69 1
|
2月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
41 0
|
2月前
|
开发者
jQuery.Deferred 在 SAP UI5 源代码中的应用分析
jQuery.Deferred 在 SAP UI5 源代码中的应用分析
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
Web App开发 JavaScript 前端开发
精心挑选的15款优秀 jQuery 文本特效插件和教程
  今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。
1164 0