Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。官方提供的实例是php版本的,您可以点击下面的链接进行浏览或下载。
这里详细描述了Uploadify3.1与2.1.4的所有属性、事件及方法
Uploadify3.1属性:
属性名 | 类型 | 默认值 | 说明 |
auto | Boolean | True | 添加到队列后是否自动上传 |
buttonClass | String | Empty String | 为Uploadify按钮添加一个类名 |
buttonCursor | String | “hand” | 鼠标移上浏览按钮显示的鼠标样式 两个值:arrow(箭头)、hand(手形) |
buttonImage | String | Null | “浏览”按钮的背景图像的路径。 如果使用默认的样式,你可以设置按钮悬停状态(这个选项是一个方便的选项和按钮分配图像的最佳方式是在CSS文件中。) |
buttonText | String | “SELECT FILES” | 显示在浏览按钮上的文本。注:若没有修改uploadify.swf的字体和uploadify.js文件的编码方式,使用中文将会是乱码 |
checkExisting | String |
|
|
Debug | Boolean | False | 设置为True打开SWFUpload调试模式。 |
fileObjName | String | “Filedata” | 在服务器端接收文件的Form表单键名 |
fileSizeLimit | Number | 0 | 允许上传文件的最大大小。这个值可以是一个数字或字符串。如果它是一个字符串,它接受一个单位(B, KB, MB, or GB)。默认单位为KB。您可以将此值设置为0 ,没有限制。 |
fileTypeDesc | String | “All Files” | 可选的文件的说明。此字符串将出现在浏览文件对话框的文件类型下拉框中。 |
fileTypeExts | String | “*.*” | 允许上传的文件扩展名。可以以英文分号隔开的多种文件扩展名。即”*.jpg;*.gif;” 注:如果用户手动键入文件名,将会绕过此安全级别,所以你需要在后台再次对文件名类型进行验证。 |
formData | JSON Object | Empty Object | 一个额外的JSON对象数据,将与每个文件一起发送至服务器端。如果为动态值,请在onUploadStart()中使用settings()方法更改该JSON值 |
Height | Number | 30 | 浏览按钮所显示的高度 |
method | String | “post” | 上传文件的方式。 两个值:”get”、”post” |
multi | Boolean | True | 设置是否为多文件上传,如果设置为False,一次将只能上传一个文件 |
overrideEvents | JSON Array | Empty Array | 你想绕过的默认脚本的事件名称的数组。你可以告诉在文档页中的每个事件可以被重写的事件。 |
preventCaching | Boolean | True | 一个防止Flash缓存和冲突的方式,如果设置为True,则Flash的URL将会添加一个随机数。 |
progressData | String | “percentage” | 设置要在文件上传进度更新队列项目中显示数据的类型。 两个值”percentage”(显示百分比)、” speed”(显示速度) |
queueID | String | False | 上传文件队列所放的元素ID,必须为ID,且不像jQuery选择器那样,它不需要加#号。如果为false,则队列会自动添加到浏览按钮下方。 |
queueSizeLimit | Number | 999 | 一次可以在队列中文件的最大数目。这并不限制可以上载的文件的数目。若要限制可以上载的文件的数目,请使用 uploadLimit。如果选定要添加到队列的文件的数目超过此限制,则会触发 onSelectError 事件。 |
removeCompleted | Boolean | True | 当文件上传完成后,是否将此文件从上传队列中清除(默认清除)。 |
removeTimeout | Number | 3 | 从文件上传完成到清除此文件之间的延迟。单位:秒 |
requeueErrors | Boolean | False | 如果设置为true,期间上传回传失误,重新排队,并多次试图上传的文件。 |
successTimeout | Number | 30 | 上传成功后,将等待服务器的响应时间。在此时间后,若服务器未响应,则默认为成功(因为已经上传完成,只是等待服务器的响应)。单位:秒 |
swf | String | “uploadify.swf” | uploadify中的uploadify.swf的路径,可以是相对或绝对路径。相对路径为相对于当前页面路径。 |
uploader | String | “uploadify.php” | 服务器上传脚本,即接收上传文件后台处理文件路径,可以是相对或绝对路径。相对路径为相对于当前页面路径。 |
uploadLimit | Number | 999 | 允许您上传的文件的最大数量。当达到或超过这个数字, onUploadError事件被触发。 |
width | Number | 120 | 浏览按钮的宽度。 |
Uploadify3.1事件:
事件名 | 参数说明 | 说明 |
onCancel(file) | file:被取消的文件对象 | 从队列中删除文件时触发。 |
onClearQueue(queueItemCount) | queueItemCount:被清空的文件数量 | 当清空文件队列时触发 |
onDestroy() | 无 | 当调用destroy()方法时触发。 |
onDialogClose(queueData) | queueData:该对象包含以下属性: filesSelected[Number]:在浏览文件中选定的文件数量 filesQueued[Number]:添加到队列中的文件数量(不会返回一个错误) filesReplaced[Number]:在队列中被替换的文件的数目 filesCancelled[Number]:被添加到队列(不替换)被取消的文件的数目 filesErrored[Number]:返回了错误的文件的数目 | 浏览文件对话框关闭时触发。如果此事件添加到 overrideEvents 选项,默认的错误消息不会警告,如果将文件添加到队列时,将发生错误。 |
onDialogOpen() | 无 | 在打开浏览文件对话框之前触发,但放在该函数中的代码不会触发直到关闭该对话框。 |
onDisable() | 无 | Uploadify 的实例通过调用禁用方法禁用时触发。 |
onEnable() | 无 | 使用禁用方法来启用 Uploadify 按钮时触发。 |
onFallback() | 无 | 如果在浏览器中未检测到兼容版本的 Flash 会在初始化过程中触发。 |
onInit(instance) | instance[Object]:Uploadify 对象的实例 | Uploadify 第一次调用时,初始化的最后触发。 |
onQueueComplete(queueData)
| queueData[object]:该对象包含以下属性: uploadsSuccessful[Number]:上传成功的文件数量 uploadsErrored[Number]:上传出错的文件数量 | 队列中的所有文件处理完成时触发。 |
onSelect(file) | file[object]:选定的文件对象。 | 当用户选定文件,点确定后触发,每个文件将会触发一次 |
onSelectError(file, errorCode, errorMsg) | file[object]:发生错误的文件对象 errorCode[String]:错误代码。以下为可能的值。 QUEUE_LIMIT_EXCEEDED – 选择文件的数量超过限定总数量 FILE_EXCEEDS_SIZE_LIMIT – 文件大小超过限制 ZERO_BYTE_FILE - 该文件没有大小。 INVALID_FILETYPE – 选择的文件类型与设定的文件类型不匹配 errorMsg[object]:完整的错误消息 | 当选择文件出错时触发,每个出错文件都会触发一次 |
onSWFReady() | 无 | 当SWF文件加载完成后触发 |
onUploadComplete(file) | file[object]:上传的文件对象或返回了一个错误。 | 每上传完成一个文件时(无论成功或失败)都会触发此事件。如果你想知道,如果上传成功与否,最好,使用onUploadSuccess事件或onUploadError事件。 |
onUploadError(file, errorCode, errorMsg, errorString) | file[object]:上传文件对象 errorCode[String]:错误代码 errorMsg[object]:完整的错误消息 errorString[String]:人类可读的错误信息,包含所有错误的详细信息 | 当一个文件已经上传,但返回一个错误触发。 |
onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) | file[object]:上传文件对象 bytesUploaded[Number]:已上传文件的字节数(byte) bytesTotal[Number]:文件的字节总数 totalBytesUploaded[Number]:在当前的上传操作上传的字节总数(所有文件) totalBytesTotal[Number]:所有的文件要上传的总字节数 | 每更新一次文件进度时触发 |
onUploadStart(file) | file[object]:将要上传的文件对象 | 文件上传之前触发,每个文件都会触发一次 |
onUploadSuccess(file, data, response) | file[object]:上传成功的文件对象 data[object]:服务器端返回的数据(任何类似的文件) response[Boolean]:如果服务器响应,则为True。如果服务器未响应或忆超过successTimeout,则为False | 每个文件上传成功后触发(每个文件触发一次) |
Uploadify3.1方法:
注:方法调用与以前不同,调用方式如下
$(“#fileID”). uploadify(‘方法名’, ’参数1’, ’参数2’, ‘参数3’…);
方法名 | 参数说明 | 说明 |
cancel(fileID, suppressEvent) | fileID[String]:要取消文件的 ID。检索文件 ID 的最简单方法是使用您要取消文件队列项的 id 属性。可以输入任意数量的文件 Id 作为参数。如果您输入 “*” 作为第一个参数,该队列中的所有文件将会被都取消。如果没有文件 ID 作为参数设置,在队列中的第一个文件就会被取消。 suppressEvent[Boolean]:如果设置为 true,onUploadCancel 事件将不会触发。清除队列时,这非常有用。 | 取消队列中的文件(无论是否正在上传) |
destroy() | 无 | 销毁的实例的 Uploadify,并返回到其原始状态的文件输入 |
disable(setDisabled) | setDisabled[Boolean]:True为禁用按钮。False为启用按钮 | 禁用或启用浏览按钮。 |
settings(name, value, resetObjects) | name[String]:要返回或更改设置的属性名称。只有设置了此参数,则将返回值。 value[String]:对当前name属性设置的值 resetObjects[Boolean]:设置为true时更新的POSTDATA的对象,以清除现有值。否则,新的值将被添加到现有的对象中 注: 不能设置SWF属性 | 获取或设置Uploadify中的属性值 |
stop() | 无 | 停止当前正在上传的文件 |
upload(fileID) | fileID[String]:要上传文件的 ID。检索文件 ID 的最简单方法是使用您要取消文件队列项的 id 属性。可以输入任意数量的文件 Id 作为参数。如果您输入 “*” 作为第一个参数,该队列中的所有文件将会被都取消。如果没有文件 ID 作为参数设置,在队列中的第一个文件就会被取消。 | 上传的特定文件或在队列中的所有文件。 |
Uploadify2.1.4属性:
属性名 | 类型 | 说明 |
auto | boolean | 添加到队列后自动上传 |
buttonImg | string | 浏览按钮的背景图片 |
buttonText | string | 浏览按钮的显示文字 |
cancelImg | string | 取消上传按钮的图片 |
checkScript | string | 服务端用来检查文件是否重名的脚本 |
displayData | string | 上传时显示的提示(percentage百分比/speed速度) |
expressInstall | string | 安装swf的文件(expressInstall.swf)路径 |
fileDataName | string | 重定义的input的名称(后台) |
fileDesc | string | 文件打开对话框中的文件类型描述 |
fileExt | string | 可允许上传的文件类型 |
folder | string | 文件存储的文件夹 |
height | integer | 浏览按钮的高度 |
hideButton | boolean | 是否隐藏浏览按钮 |
method | string | 表单提交方式(post/get) |
multi | boolean | 是否允许上传多个文件 |
queueID | string | 上传队列的元素的ID |
queueSizeLimit | integer | 上传队列大小 |
removeCompleted | boolean | 完成上传时是否自动删除 |
rollover | boolean | 当鼠标移上时产生特效 |
script | string | 上传表单提交的目标脚本 |
scriptAccess | string | swf的文件地址 |
scriptData | JSON | 提交给后台的附加信息 |
simUploadLimit | integer | 同时可上传的文件实例数 |
sizeLimit | integer | 每文件的最大大小 |
uploader | string | uploadify上传的swf文件路径 |
width | integer | 浏览按钮的宽度 |
wmode | string | flash文件的wmode模式 |
Uploadify2.1.4事件:
事件名 | 参数 | 说明 |
onAllComplete | function(event,data) | 当所有文件上传完毕时触发 |
onCancel | function(event,ID,fileObj,data) | 当某文件被取消上传时触发 |
onCheck | function() | 当开始上传时检查是否重名 |
onClearQueue | function(event) | 当执行uploadifyClearQueue()后执行 |
onComplete | function(event, ID, fileObj, response, data) | 当某文件上传完毕时触发 |
onError | function(event,ID,fileObj,errorObj) | 当上传时有错误返回时触发 |
onInit | function() | 当uploadify实例加载完毕时触发 |
onOpen | function(event,ID,fileObj) | 当某文件开始上传时触发 |
onProgress | function(event,ID,fileObj,data) | 当某文件上传进度改变时触发 |
onQueueFull | function(event,queueSizeLimit) | 当上传队列达到限制时触发 |
onSelect | function(event,ID,fileObj) | 每个文件被添加到上传队列时触发 |
onSelectOnce | function(event,data) | 一次文件被添加到上传队列时触发 |
onSWFReady | function() | 当flash加载完毕时触发 |
Uploadify2.1.4方法:
方法名 | 说明 |
.uploadify() | 创建Uploadify的实例 |
.uploadifyCancel() | 从上传队列中移除一个文件 |
.uploadifyClearQueue() | 清空上传队列 |
.uploadifySettings() | 修改Uploadify实例的属性 |
.uploadifyUpload() | 触法文件上传 |