jquery uploadify3.2.1插件使用说明

uploadify允许多文件上传的jquery插件，有两个版本，一个基于HTML5（uploadiFive），一个基于flash（uploadify）。
html5版本允许文件的拖拽，实时添加到文件列表。 该插件提供相应的上传进度条。自定义文件大小、数量、类型、同一时间上传最大数等限制。
需要后台代码文件处理文件的上传，在项目中设定用于存放上传文件的文件夹。
（1）引入下载uploadify插件文件和jquery文件。
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
（2）添加表单
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
（3）上传的js函数
<script type="text/javascript">
$(document).ready(function()
{
$("#uploadify").uploadify({
'swf' : '/uploadify/uploadify.swf',
//相对路径 显示为一个按钮 点击出现打开文件对话框
'uploader' : '/uploadify/uploadify.php'
//后台处理程序的相对路径
'auto': false,
//true选择文件后直接上传 false点击上传按钮才开始上传
'buttonClass' : 'some-class',
//添加到上传按钮的类
'buttonCursor' : 'arrow',
//设置鼠标停靠在浏览按钮的类型 hand arrow
'buttonImage' : '/uploadify/browse-btn.png',
//浏览按钮的背景图片
'buttonText' : 'BROWSE...',
//浏览按钮上的文字
'checkExisting' : '/uploadify/check-exists.php',
//用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 存在函数返回1 不存在返回0
'debug' : true,
//打开上传SWFUpload debug模式
'fileObjName' : 'the_files',
//设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据
'fileSizeLimit' : '100KB',
//上传文件的大小限制 默认单位是kb 设置为0没有限制
'fileTypeDesc' : 'Any old file you want...',
//用来设置选择文件对话框的提示文本
'fileTypeExts' : '*.gif; *.jpg; *.png',
//可以选择的文件类型
// 'formData' : {'someKey' : 'someValue', 'someOtherKey' : 1},
//后台传递静态参数
'onUploadStart': function (file) {
$("#file_upload").uploadify("settings", "formData", { 'ctrlid': ctrlid });
//在onUploadStart事件中，上传之前，动态传递参数传递到后台
}
'height' : 50,
//浏览按钮的高度
'method' : 'post',
//提交方式Post(默认) 或Get
'multi': true
//设置是否可以上传多个文件
'overrideEvents' : ['onUploadProgress'],
//设置哪些事件可以被重写，JSON格式
'preventCaching' : false,
//如果为true，则每次上传文件时自动加上一串随机字符串参数，防止URL缓存影响上传结果
'progressData' : 'speed',
//上传进度显示方式，percentage显示上传百分比，speed显示上传速度
'queueID' : 'some_file_queue',
//设置上传队列容器DOM元素的ID，如果为false则自动生成一个队列容器。
'queueSizeLimit' : 1,
//队列最多显示的任务数量，如果选择的文件数量超出此限制，将会出发onSelectError事件。注意此项并非最大文件上传数量，如果要限制最大上传文件数量，应设置uploadLimit。
'removeCompleted' : false,
//是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示 默认true
'removeTimeout' : 10,
//如果设置了任务完成后自动从队列中移除，则可以规定从完成到被移除的时间间隔
'requeueErrors' : true,
//设置true，则单个任务上传失败后将返回错误信息，并重新加入任务队列上传。
'successTimeout' : 5,
//文件上传成功需要返回标志 若超时该时间则认为成功
'uploadLimit' : 1,
//最大上传文件数量，达到或超出此限制会触发onUploadError事件
'width' : 300,
//浏览按钮的宽度 单位像素
'onCancel' : function(file) {
alert('The file ' + file.name + ' was cancelled.');
},
//文件队列中的文件被删除时触发该方法 参数为被取消上传的对象
'onClearQueue' : function(queueItemCount) {
alert(queueItemCount + ' file(s) were removed from the queue');
} ,
//调用函数cancel方法(参数为*)触发，queueItemCount参数为被取消上传的文件数量。
'onDestroy' : function() {
alert('I am getting destroyed!');
},
//调用destory时触发
'onDialogClose' : function(queueData) {
alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.');
},
//文件浏览框关闭时触发，如果此事件被重写，则当向队列添加文件上传出错时不会弹出错误消息提示。filesSelected 文件选择对话框中共选择了多少个文件 filesQueued 已经向队列中添加了多少个文件 filesReplaced 已经向队列中替换了多少个文件 filesCancelled 取消了多少个文件 filesErrored 出错了多少个文件
'onDialogOpen' : function() {
$('#message_box').html('The file dialog box was opened...');
},
//文件选择对话框弹出时触发，选择对话框被关闭之前可能不会执行完全。
'onDisable' : function() {
alert('You have disabled Uploadify!');
},
//调用disable方法禁用Uploadify上传按钮时触发

'onEnable' : function() {
alert('You can use Uploadify again.');
},
//disable方法启用Uploadify上传按钮时被调用时触发
'onFallback' : function() {
alert('Flash was not detected.');
},
//Uploadify初始化过程中检测到当前浏览器不支持flash时触发
'onInit' : function(instance) {
alert('The queue ID is ' + instance.settings.queueID);
},
//首次初始化Uploadify结束时触发
'onQueueComplete' : function(queueData) {
alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
},
//文件上传队列处理完毕后触发 uploadsSuccessful – 上传成功的文件数量 uploadsErrored – 上传失败的文件数量
'onSelect' : function(file) {
alert('The file ' + file.name + ' was added to the queue.');
},
//择文件后向队列中添加每个上传任务时都会触发
'onSelectError' : function() {
alert('The file ' + file.name + ' returned an error and was not added to the queue.');
},
//选择文件后向队列中添加每个上传任务时如果失败都会触发
'onSWFReady' : function() {
alert('The Flash file is ready to go.');
},
//Flash文件载入成功后触发
'onUploadComplete' : function(file) {
alert('The file ' + file.name + ' finished processing.');
},
//每个文件上传完毕后无论成功与否都会触发
'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.');
},
//处理上传队列的过程中会多次触发此事件，每当任务状态有更新时都会触发
'onUploadStart' : function(file) {
alert('Starting to upload ' + file.name);
},
//文件即将开始上传时触发
'onUploadSuccess' : function(file, data, response) {
alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
}
//文件上传成功时触发
});
});
</script>
（4）动作触发

<a href="javascript:$('#file_upload').uploadify('cancel')">Cancel
First File</a>
|
<a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear
the Queue</a>
|
<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload
the Files</a>
cancel(fileID, suppressEvent) 取消队列中的任务，不管此任务是否已经开始上传 fileID –
要取消的文件ID，如果为空则取消队列中第一个任务，如果为’*'则取消所有任务
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy
Uploadify</a>
destroy() 销毁Uploadify实例并将文件上传按钮恢复到原始状态
<a href="javascript:$('#file_upload').uploadify('disable', true)">Disable
the Button</a>
|
<a href="javascript:$('#file_upload').uploadify('disable', false)">Enable
the Button</a>
disable(setDisabled) 禁用或启用文件浏览按钮
<a href="javascript:changeBtnText()">Change the Button Text</a>
|
<a href="javascript:returnBtnText();">Read the Button</a>

function changeBtnText() {
$('#file_upload').uploadify('settings','buttonText','BROWSE'); }

function returnBtnText() { alert('The button says ' +
$('#file_upload').uploadify('settings','buttonText')); } settings(name,
value, resetObjects) 获取或设置Uploadify实例参数

<a href="javascript:$('#file_upload').uploadify('stop')">Stop the
Uploads!</a>
stop()停止当前正在上传的任务
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
upload(fileID)立即上传指定的文件，如果fileID为’*'表示上传所有文件，要指定上传多个文件，则将每个文件的fileID作为一个参数

转载于:https://www.cnblogs.com/bmdjing/p/4664630.html