jQuery上传插件uploadify 3.2.1 使用详解-优快云博客

本文详细介绍了Uploadify插件的配置选项、事件处理及常用方法。包括如何设置上传文件的数量限制、文件类型等，并提供了丰富的事件示例，如文件上传成功后的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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当队列中的所有文件全部完成上传时触发

1 function (stats) {
2     alert("成功上传的文件数：" + stats.uploadsSuccessful + " -上传出错的文件数：" +
3     stats.uploadsErrored + " -上传的文件总大小：" + stats.uploadSize);
4 }

View Code

●onUploadComplete每个文件上传完成时触发

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 }

View Code

●onUploadSuccess每个文件上传成功后触发

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 }

View Code

●onUploadError每个文件上传出错时触发

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 }

View Code

●onUploadProgress上传进度发生变更时触发

1 function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
2     alert("当前文件已上传：" + bytesUploaded + "当前文件大小：" + bytesTotal +
3     "队列已上传：" + totalBytesUploaded + "队列大小：" + totalBytesTotal);
4 }

View Code

●onCancel在文件被移出上传队列时触发

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 }

View Code

●onClearQueue在调用cancel方法且传入参数*时触发

1 function (queueItemCount) {
2     alert("取消上传文件数量" + queueItemCount);
3 }

View Code

1 <a href="javascript:$('#uploadify').uploadify('cancel','*')">取消上传</a>

View Code

●onDialogClose打开文件对话框关闭时触发

1 function (queue) {
2     alert("选定的文件数：" + queue.filesSelected + "成功添加至队列的文件数：" + queue.filesQueued +
3     "添加至队列发生错误的文件数：" + queue.filesErrored + "现有队列被替换文件数：" +
4     queue.filesReplaced + "现有队列被取消文件数：" +
5     queue.filesCancelled + "队列中的总文件数量：" + queue.Length);
6 }

View Code

●onUploadStart每个文件上传开始时触发

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 }

View Code

●onDialogOpen选择文件对话框打开时触发

1 function () {
2     alert("打开");
3 }

View Code

●onFallback没有兼容的flash时触发

1 function () {
2     alert("flash不兼容");
3 }

View Code

●onInit每次初始化一个队列时触发

1 function (instance) {
2     alert(instance.settings.queueID);
3 }

View Code

●onSelect选择文件后触发

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 }

View Code

●onSelectError选择文件后出错时触发

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 }

View Code