jQuery上传插件uploadify 3.2.1 使用详解
1.属性
名称 |
默认值 |
说明 |
swf |
|
[必须设置]swf的路径 |
uploader |
|
[必须设置]服务器端脚本文件路径 |
uploadLimit |
999 |
最多上传文件数量 |
checkExisting |
false |
检查上传文件是否存在的服务器端脚本文件路径 |
queueID |
|
显示上传文件队列的元素id,可以简单用一个div显示 |
queueSizeLimit |
999 |
上传文件队列长度限制 |
auto |
true |
表示在选择文件后是否自动上传 |
multi |
true |
是否支持多文件上传 |
buttonClass |
|
上传按钮样式类型 |
buttonCursor |
hand |
上传按钮Hover时的鼠标形状 |
buttonImage |
NULL |
上传按钮背景图片 |
buttonText |
SELECT FILES |
上传按钮显示文字 |
height |
30 |
上传按钮高度 |
width |
120 |
上传按钮宽度 |
debug |
false |
是否开启调试模式 |
fileObjName |
FileData |
文件对象名称,用于服务器端获取文件 |
fileSizeLimit |
|
上传文件大小限制,默认单位是KB,如:”10KB” |
fileTypeDesc |
|
文件类型说明,在选择文件时可以看到 |
fileTypeExts |
*.* |
指定允许上传的文件类型,如:”*.jpg;*.gif” |
formData |
|
指定上传文件附带的其他数据,用于服务器端获取这些数据,如:{“id”:”001”,”name”:”LiJin”}包含两个键值对 |
method |
post |
和后台交互方式,也可以设置为get |
overrideEvents |
|
设置插件的某些事件可以被用户覆写,如:{“onUploadSuccess”} |
preventCaching |
true |
若设置为true,一个随机数将被加载swf文件URL的后面,防止浏览器缓存 |
progressData |
|
设置文件上传时显示的数据,可以设为上传速度或者百分比,分别对应speed和percentage |
removeCompleted |
true |
表示上传文件完成后是否删除队列中的对应元素 |
removeTimeout |
3 |
表示上传完成后多久删除队列中的进度条,单位为秒 |
requeueErrors |
|
若设置为true,那么在上传过程中因为出错导致上传失败的文件将重新加入队列 |
successTimeout |
30 |
表示文件上传完成后等待服务器响应的时间。超过该时间,那么将认为上传成功。单位为秒 |
2.事件
●onQueueComplete当队列中的所有文件全部完成上传时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (stats) { 2 alert("成功上传的文件数:" + stats.uploadsSuccessful + " -上传出错的文件数:" + 3 stats.uploadsErrored + " -上传的文件总大小:" + stats.uploadSize); 4 }
●onUploadComplete每个文件上传完成时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (file) { 2 alert("id:" + file.id + " -索引:" + file.index + " -文件名称:" + file.name + 3 " -文件大小:" + file.size + " -文件类型:" + file.type + " -创建日期:" + file.creationdate + 4 " -修改日期:" + file.modificationdate + " -文件状态:" + file.filestatus); 5 }
●onUploadSuccess每个文件上传成功后触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (file , data, response) { 2 alert("id:" + file.id + " -索引:" + file.index + " -文件名称:" + file.name + 3 " -文件大小:" + file.size + " -文件类型:" + file.type + " -创建日期:" + file.creationdate + 4 " -修改日期:" + file.modificationdate + " -文件状态:" + file.filestatus + 5 " –服务器端消息:" + data + " –是否上传成功:" + response); 6 }
●onUploadError每个文件上传出错时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (file , errorCode, errorMsg , errorString) { 2 alert("id:" + file.id + " -索引:" + file.index + " -文件名称:" + file.name + 3 " -文件大小:" + file.size + " -文件类型:" + file.type + " -创建日期:" + file.creationdate + 4 " -修改日期:" + file.modificationdate + " -文件状态:" + file.filestatus + 5 " –错误代码:" + errorCode + " –错误描述:" + errorMsg + " –简要错误描述:" + errorString); 6 }
●onUploadProgress上传进度发生变更时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { 2 alert("当前文件已上传:" + bytesUploaded + "当前文件大小:" + bytesTotal + 3 "队列已上传:" + totalBytesUploaded + "队列大小:" + totalBytesTotal); 4 }
●onCancel在文件被移出上传队列时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (file) { 2 alert("id:" + file.id + " -索引:" + file.index + " -文件名称:" + file.name + 3 " -文件大小:" + file.size + " -文件类型:" + file.type + " -创建日期:" + file.creationdate + 4 " -修改日期:" + file.modificationdate + " -文件状态:" + file.filestatus); 5 }
●onClearQueue在调用cancel方法且传入参数*时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (queueItemCount) { 2 alert("取消上传文件数量" + queueItemCount); 3 }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <a href="javascript:$('#uploadify').uploadify('cancel','*')">取消上传</a>
●onDialogClose打开文件对话框关闭时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (queue) { 2 alert("选定的文件数:" + queue.filesSelected + "成功添加至队列的文件数:" + queue.filesQueued + 3 "添加至队列发生错误的文件数:" + queue.filesErrored + "现有队列被替换文件数:" + 4 queue.filesReplaced + "现有队列被取消文件数:" + 5 queue.filesCancelled + "队列中的总文件数量:" + queue.Length); 6 }
●onUploadStart每个文件上传开始时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (file) { 2 alert("id:" + file.id + " -索引:" + file.index + " -文件名称:" + file.name + 3 " -文件大小:" + file.size + " -文件类型:" + file.type + " -创建日期:" + file.creationdate + 4 " -修改日期:" + file.modificationdate + " -文件状态:" + file.filestatus); 5 }
●onDialogOpen选择文件对话框打开时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function () { 2 alert("打开"); 3 }
●onFallback没有兼容的flash时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function () { 2 alert("flash不兼容"); 3 }
●onInit每次初始化一个队列时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (instance) { 2 alert(instance.settings.queueID); 3 }
●onSelect选择文件后触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (file) { 2 alert("id:" + file.id + " -索引:" + file.index + " -文件名称:" + file.name + 3 " -文件大小:" + file.size + " -文件类型:" + file.type + " -创建日期:" + file.creationdate + 4 " -修改日期:" + file.modificationdate + " -文件状态:" + file.filestatus); 5 }
●onSelectError选择文件后出错时触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function (file , errorCode, errorMsg ) { 2 alert("id:" + file.id + " -索引:" + file.index + " -文件名称:" + file.name + 3 " -文件大小:" + file.size + " -文件类型:" + file.type + " -创建日期:" + file.creationdate + 4 " -修改日期:" + file.modificationdate + " -文件状态:" + file.filestatus + 5 " –错误代码:" + errorCode + " –错误描述:" + errorMsg); 6 }
3.方法
cancel、destroy、stop、upload用法一致,如:<a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>,其他方法视情况而定。