html
<link type="text/css" href="Javascript/uploadify/uploadify.css" rel="stylesheet" />
<script type="text/javascript" language="JavaScript" src="Javascript/uploadify/jquery.uploadify-3.1.min.js"></script>
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>
js
$('#file_upload').uploadify({
'swf' : 'Javascript/uploadify/uploadify.swf',
'uploader' : 'Javascript/uploadify/uploadify.php',
'method' : 'post',
'formData' : { 'someKey' : 'someValue' },
'width' : 120,
'height' : 30,
'buttonImage' : 'Javascript/uploadify/browse-btn.png',
'fileExt' : '*.jpg;*.jepg;*.png;*.gif;*.bmp;*.tif;*.tiff',
'fileDesc' : 'Image Files (.JPG, .JPEG, .PNG, .GIF, .BMP, .TIF, .TIFF)',
'auto' : true,
'multi': true,
'removeCompleted': true,
'onSelect' : function(file) {
//alert('The file ' + file.name + ' was added to the queue.');
var value = $("#FileName").attr('value');
$("#FileName").attr('value',value + file.name + ',');
},
'onUploadSuccess' : function(file, data, response) {
//alert('The file was saved to: ' + data);
}
});
文档说明：
必配属性：
langFile
说明： 自定义语言包路径（语言包必须使用UTF-8编码）
类型： 字符串（string）
默认值： uploadifyLang_en.js
示例： 'langFile' : '/uploadify/lang/uploadifyLang_zh.js'
SWF
说明： 自定义uploadify.swf路径
类型： 字符串（string）
默认值： uploadify.swf
示例： 'swf' : '/uploadify/uploadify.swf'
uploader
说明： 后台处理程序的路径
类型： 字符串（string）
默认值： uploadify.php
示例： 'uploader' : '/uploadify/upload.php'
options（属性）
auto
说明： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传
类型： 布尔值(boolean)
默认值： false
示例： 'auto' : false
buttonText
说明： 取代语言包中uploadifyLang['buttonText']变量的值，用于定义浏览按钮的文本，按钮的默认样式定义于uploadify.css
类型： 字符串（string）
默认值： 'SELECT FILES‘（在uploadifyLang_en.js中定义）
示例： 'buttonText' : 'Select Images'
width
说明： 设置浏览按钮的宽度，按钮的默认样式定义于uploadify.css
类型： 数字（number）
默认值： 120
示例： 'width' : 120
height
说明： 设置浏览按钮的高度，按钮的默认样式定义于uploadify.css
类型： 数字（number）
默认值： 30
示例： 'height' : 30
cancelImage
说明： 自定义取消上传图标的路径（文件队列中每个文件后的
图标）
类型： 字符串（string）
默认值： uploadify-cancel.png
示例： 'cancelImage' : '/uploadify/uploadify-cancel.png'
checkExisting
说明： 用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
类型： 字符串（string）
默认值： 'uploadify-check-exists.php'
示例： 'checkExisting' : '/uploadify/uploadify-check-exists.php'
fileSizeLimit
说明： 上传文件的大小限制 单位bytes（0为不限制）
类型： 字符串（string）
默认值： 0
示例： 'fileSizeLimit' : 1*1024*1024, // 1MB
fileTypeDesc
说明： 取代语言包中uploadifyLang['fileTypeDesc']变量的值，用于设置对话框中文件类型的提示文本，必须在设置fileTypeExts属性后才有效
类型： 字符串（string）
默认值： 'All Files (*.*)'（在uploadifyLang_en.js中定义）
示例： 'fileTypeDesc' : '图像文件'
fileTypeExts
说明：设置允许选择的文件类型，'*.*' 将允许选择所有文件类型
类型： 字符串（string）
默认值： '*.*'
示例： 'fileTypeExts' : '*.gif;*.jpg;*.png'
method
说明：文件上传方式（Post 或Get）
类型： 字符串（string）
默认值： 'post'
示例： 'method' : 'post'
multi
说明： 设置为true可以在选择文件对话框中选择多个文件，设置为false则在选择文件对话框中只能选择一个文件
类型： 布尔值(boolean)
默认值： false
示例： 'multi' : true
queueID
说明： 文件队列DIV的ID，可以设置一个层的ID用以显示文件队列，如果设置为false，则在浏览按钮下方生成一个文件队列
类型： false/字符串（string）
默认值： false
示例： 'queueID' : false
queueSizeLimit
说明： 设置队列中最大的文件个数，如果'multi'属性设置为true，则该属性必须大于1
类型： 数字（number）
默认值： 999
示例： 'queueSizeLimit' : 999
removeCompleted
说明： 文件成功上传后是否从队列中删除，false为不删除
类型： 布尔值（boolean）
默认值： true
示例： 'removeCompleted' : false
postData
说明： 传递额外的参数信息
类型： JSON
默认值： {}
示例： 'postData' : {myVarName:myVarValue}
progressData
说明： 显示文件上传的相关信息（百分比、上传速度、全部）
类型： 'percentage'/'speed'/'all'
默认值：
示例： 'progressData' : 'all'
EVENTS（事件）
EVENTS（事件）
onDialogClose
|
触发条件： 当文件选择对话框关闭时触发
参数：swfuploadifyQueue
参数属性：
1、filesErrored ： number类型， 因错误而未添加至上传队列中的文件数量
2、errorMsg ： String类型， 当filesErrored > 0时的错误信息
3、filesSelected ： number类型， 选定要添加至上传队列中的文件数量
4、filesQueued ： number类型， 添加至上传队列中的文件数量
5、queueLength ： number类型， 文件队列中总文件的数量
示例：
onDialogClose : function(swfuploadifyQueue) {
if( swfuploadifyQueue.filesErrored > 0 ){
alert( '添加至队列时有'
+swfuploadifyQueue.filesErrored
+'个文件发生错误n'
+'错误信息:'
+swfuploadifyQueue.errorMsg
+'n选定的文件数:'
+swfuploadifyQueue.filesSelected
+'n成功添加至队列的文件数:'
+swfuploadifyQueue.filesQueued
+'n队列中的总文件数量:'
+swfuploadifyQueue.queueLength);
}
}
|
onDialogOpen
|
触发条件： 当选择文件对话框打开时触发
参数： 没有参数
示例：
onDialogOpen : function() {
alert( 'Open!');
}
|
onSelect
|
触发条件：当每个文件添加至队列后触发
参数： file
参数属性：
1、 id ： String类型， 文件ID， 用于启动或取消上传
2、 index ： number类型， 文件索引，用于getFile(i)函数
3、 name ： String类型， 文件名， 不包含上传路径
4、 size ： number类型， 文件的字节数
5、 type ： String类型， 文件扩展名
6、 creationdate ： Date类型， 文件创建日期
7、 modificationdate： Date类型， 文件修改日期
8、 filestatus ： number类型， 当前文件状态
示例：
onSelect : function(file) {
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 类型: ' + file.type
+ ' - 创建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件状态: ' + file.filestatus);
}
|
onSelectError
|
触发条件：当文件选定发生错误时触发
参数： file， errorCode， errorMsg
参数属性：
1、 file参数的属性参见 onSelect 事件
2、 errorCode ： number类型， 错误代码
3、 errorMsg ： String类型， 错误描述
示例：
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
|
触发条件：当队列中的所有文件全部完成上传时触发
参数： stats
参数属性：
1、 in_progress ： number类型， 正在处理的文件数，该事件中一直为0
2、 files_queued ： number类型， 队列中的文件数， 该事件中一直为0
3、 successful_uploads ： number类型， 成功上传的文件数（因成功上传被移除队列）
4、 upload_errors ： number类型， 上传出错的文件数（不包括取消上传的文件）
5、 upload_cancelled ： number类型， 取消上传的文件数
6、 queue_errors ： number类型， 因错误而被移除除队列的文件数量
示例：
onQueueComplete : function(stats) {
alert( '成功上传的文件数: ' + stats.successful_uploads
+ ' - 上传出错的文件数: ' + stats.upload_errors
+ ' - 取消上传的文件数: ' + stats.upload_cancelled
+ ' - 出错的文件数' + stats.queue_errors);
}
|
onUploadComplete
|
触发条件：队列中的每个文件上传完成时触发一次
参数： file， swfuploadifyQueue
参数属性：
1、 file参数的属性参见 onSelect 事件
2、 swfuploadifyQueue参数的属性参见 onDialogClose 事件
示例：
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
|
触发条件：上传文件出错是触发（每个出错文件触发一次）
参数： file， errorCode， errorMsg， errorString， swfuploadifyQueue
参数属性：
1、 file参数的属性参见 onSelect 事件
2、 errorCode ： number类型， 错误代码
3、 errorMsg ： String类型， 错误描述
4、 errorString ： String类型， 简短的错误描述
5、 swfuploadifyQueue参数的属性参见 onDialogClose 事件
示例：
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
|
触发条件：上传进度发生变更时触发
参数： file， fileBytesLoaded， fileTotalBytes， queueBytesLoaded， swfuploadifyQueueUploadSize
参数属性：
1、 file参数的属性参见 onSelect 事件
2、 fileBytesLoaded： number类型， 当前文件已上传的字节数
3、 fileTotalBytes： number类型， 当前文件的总大小
4、 queueBytesLoaded： number类型， 整个队列已上传的字节数
5、 swfuploadifyQueueUploadSize： number类型， 队列中所有文件的总大小
示例：
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
|
触发条件：上传开始时触发（每个文件触发一次）
参数： file
参数属性：
1、 file参数的属性参见 onSelect 事件
示例：
onUploadStart: function(file) {
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 类型: ' + file.type
+ ' - 创建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件状态: ' + file.filestatus );
}
|
onUploadSuccess
|
触发条件：上传完成时触发（每个文件触发一次）
参数： file， data， response
参数属性：
1、 file参数的属性参见 onSelect 事件
2、 data： String类型， 服务器端返回的消息
3、 response： Boolean类型， 是否上传成功
示例：
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);
}
|
METHODS（方法）
METHODS（方法）
.uploadify()
|
说明 ： 在页面创建一个uploadify的实例
定义 ： uploadify:function(options,swfUploadOptions)
示例 ：
$("#gallery").uploadify({
//必须配置的属性
langFile : '/uploadify/uploadifyLang_en.js',
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php'
},0);
|
.uploadifyDestroy()
|
说明 ： 注销指定的uploadify实例
定义 ： uploadifyDestroy:function()
示例 ：
$('#gallery').uploadifyDestroy();
|
.uploadifyCancel()
|
说明 ： 通过ID从上传队列中移除指定的文件，ID在文件添加至队列时由Uploadify脚本生成
定义 ： uploadifyCancel:function(fileID)
示例 ：
//参数为空时默认移除队列中第一个文件
$('#gallery).uploadifyCancel();
//从队列中移除ID为'SWFUpload_0_2'的文件
$('#gallery).uploadifyCancel('SWFUpload_0_2');
//从队列中移除ID为'SWFUpload_0_1'和'SWFUpload_0_3'的文件
$('#gallery).uploadifyCancel('SWFUpload_0_1', 'SWFUpload_0_3');
//从队列中移除所有文件
$('#gallery).uploadifyCancel('*');
|
.uploadifyDisable()
|
说明 ： 是否禁用选择浏览按钮
定义 ： uploadifyDisable:function(isDisabled)
示例 ：
$('#gallery').uploadifyDisable(true);//禁用
$('#gallery').uploadifyDisable(false);//启用
$('#gallery').uploadifyDisable();//为空相当于启用
|
.uploadifySettings()
|
说明 ： 更新或检索设置
定义 ： uploadifySettings:function(name,value,resetObjects)
示例 ：
//返回队列中的文件数（可使用其避免上传空队列）
$('#gallery').uploadifySettings('queueLength');
//返回uploadify实例中指定属性的配置信息
$('#gallery').uploadifySettings('uploader');
//更改或设定uploadify示例中指定属性的值
$('#gallery').uploadifySettings('method', 'get');
|
.uploadifyStop()
|
说明 ： 停止当前正在进行的上传，并按次序重新上传
定义 ： uploadifyStop:function()
示例 ：
$('#gallery').uploadifyStop();
|
.uploadifyUpload()
|
说明 ： 设定优先上传的文件,文件ID在文件添加至队列时由Uploadify脚本生成
定义 ： uploadifyUpload:function()
示例 ：
//启动上传
$('#gallery').uploadifyUpload();
//顺序上传SWFUpload_0_3、SWFUpload_0_2、SWFUpload_0_4后上传队列中其他文件
$('#gallery').uploadifyUpload('SWFUpload_0_3',
'SWFUpload_0_2',
'SWFUpload_0_4');
|
