强大的jquery上传插件SWF版Uploadify参数详解
Posted 孤天浪雨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了强大的jquery上传插件SWF版Uploadify参数详解相关的知识，希望对你有一定的参考价值。
强大的jquery上传插件SWF版Uploadify参数详解
说到Uploadify，不用说网络上很多人都在用，这可是个非常强大的上传插件，但遗憾的是的其html5版是收费的，5刀，需要的可以去其官方网站下载。屌丝的jQ酷只能讲下swf版了，这个是免费的，功能很强大，缺点就是不支持水果。
Uploadify内置了许多参数，方法，事件等，使用起来方便快捷，官方有详细的方档，当然都是英文的，嘻嘻。至于Uploadify有多强大，就不说了，亲自验证吧，本文讲解的Uploadify 3.2.1版，咱们就来详细的了解下各项参数吧。
jquery实例：Uploadify使用详解
- 引入核心文件
<link rel="stylesheet" type="text/css" href="uploadify.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>- 构建html
<input type="file" name="file_upload" id="file_upload" />- 写入JS
$(function()
$('#file_upload').uploadify(
'swf' : 'uploadify.swf',// uploadify.swf 文件的相对JS文件的路径
'uploader' : 'uploadify.php'//后台处理程序的相对路径
// 更多的参数
);
);- 基础的实例代码
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function()
$('#file_upload').uploadify(
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Your options here
);
);
</script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>参数
- auto:布尔类型，设置为true时，选择文件后将自动上传，设置为false则需要调用上传方法触发,以下为实例代码，下文就不写完整的代码了，亲们照着添加上去就可以了。
$(function()
$("#file_upload").uploadify(
'auto' : true,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
);
);- buttonClass：设置按钮的样式类，注意：样式的hover也设置下。
'buttonClass' : 'some-class',//自定义的样式类名- buttonCursor：默认值为hand，定义鼠标悬浮于按钮时的样式
'buttonCursor' : 'arrow',- buttonImage:默认值null，定义按钮的背景图片，同时需定义下按钮的CSS
<style type="text/css">
.uploadify-button
background-color: transparent;
border: none;
padding: 0;
.uploadify:hover .uploadify-button
background-color: transparent;
</style>
<input type="file" name="file_upload" id="file_upload" />
$(function()
$("#file_upload").uploadify(
'buttonImage' : '/uploadify/browse-btn.png',
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
);
);- buttonText：默认值SELECT FILES，定义按钮的文字
'buttonText' : '上传',- checkExisting：默认值false，定义后台检测文件是否存的程序，存在返回1，不存在返回0
'checkExisting' : '/uploadify/check-exists.php',- debug：布尔值，默认值false，如设置为true开始debug模式
'debug' : true,- fileObjName：默认值Filedata，服务端调用的上传项的名称，以PHP为例，如果此项设置为the_files，那么在服务端获取时使用$_FILES[‘the_files’]。
'fileObjName' : 'the_files',- fileSizeLimit：限制上传文件的大小，默认单位KB，可以是B, KB, MB, or GB，设为0则不限制大小。
'fileSizeLimit' : '100KB',- fileTypeDesc：默认值：All Files，可选的文件类型，这个字符串出现在浏览文件对话框的文件类型下拉列表中。
'fileTypeDesc' : 'Image Files',- fileTypeExts:默认值.，定义可以上传的文件类型
'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.gif; *.jpg; *.png',- formData：JSON类型，默认为Empty Object包含额外数据的JSON对象，在上传文件时通过POST或get方式发送给服务端。如PHP可通过[Math Processing Error]_POST 来获取。
'formData' : 'someKey' : 'someValue', 'someOtherKey' : 1,- height：默认30，单位像素，上传按钮的高度
'height' : 50,- itemTemplate：默认值false，指定一个html模板给每个上传返回的数据，并添加上queue中。这里有个变量需设置
- instanceID：Uploadify实例ID，fileID：加入到queue的文件ID，fileName：加入到queue的文件名,fileSize：加入到queue的文件大小。模板中变量这样使用$fileName，具体代码如下
'itemTemplate' : '<div id="$fileID" class="uploadify-queue-item">\\
<div class="cancel">\\
<a href="javascript:$(\\'#$instanceID\\').uploadify(\\'cancel\\', \\'$fileID\\')">X</a>\\
</div>\\
<span class="fileName">$fileName ($fileSize)</span><span class="data"></span>\\
</div>'- method：默认值post，表单提交的方式。
'method' : 'post',- multi：默认值true，是否允许多文件上传。
'multi' : false,- overrideEvents：默认值Empty Array，接受一个JSON数组，把想重写的事件名称写到数组内即可进行重写。
'overrideEvents' : ['onUploadProgress'],- preventCaching：默认为true，为真时一个随机数将会添加上SWF文件的URL上，这样就不会被缓存。
'preventCaching' : false,- progressData：默认值percentage，上传数据时有queue显示的进度显示方式，两个类型percentage’ 和 ‘speed’.
'progressData' : 'speed',- queueID：默认值false，queue DOM元素的ID，如果设为false，将生成一个文件队列和queueID将被动态设置
<style type="text/css">
#some_file_queue
background-color: #FFF;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
height: 103px;
margin-bottom: 10px;
overflow: auto;
padding: 5px 10px;
width: 300px;
</style>
<div id="some_file_queue"></div>
<input type="file" name="file_upload" id="file_upload" />
$(function()
$("#file_upload").uploadify(
'queueID' : 'some_file_queue',
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
);
);- queueSizeLimit：默认值999，容纳文件队列的最大数
'queueSizeLimit' : 1,- removeCompleted：默认值true，设置为false时，queue显示的结果一直显示。
'removeCompleted' : false,- removeTimeout：默认值3，单位秒。文件上传完后延时隐藏queue队列。
'removeTimeout' : 10,- requeueErrors：默认值false，设为真时，上传出错时将返回错误信息，并再次重试上传。
$(function()
$("#file_upload").uploadify(
'requeueErrors' : true,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/not_here.php',
'onUploadStart' : function(file)
console.log('Attempting to upload: ' + file.name);
);
);- successTimeout：默认值30秒，文件上传完成时等待服务器响应的时间，之后显示成功信息。
'successTimeout' : 5,- swf：默认值uploadify.swf，uploadify.swf的相对路径。
'swf' : '/uploadify/uploadify.swf',- uploader：后台处理程序的相对路径，默认值uploadify.php
'uploader' : '/uploadify/uploadify.php'- uploadLimit：默认值999，上传的最大文件数
'uploadLimit' : 1- width：默认值120，单位为像素，上传按钮的宽度
'width' : 300事件
- onCancel：文件从队列中移除时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload')">Upload Files</a>
$(function()
$("#file_upload").uploadify(
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onCancel' : function(file)
alert('The file ' + file.name + ' was cancelled.');
);
);- onClearQueue：在cancel方法被传参“*”调用时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('cancel','*');">Clear Queue</a>
$(function()
$("#file_upload").uploadify(
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onClearQueue' : function(queueItemCount)
alert(queueItemCount + ' file(s) were removed from the queue');
);
);- onDestroy：在调用 destroy方法时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onDestroy' : function()
alert('I am getting destroyed!');
);
);onDialogClose：在文件对话框关闭时触发。参数为一个对象queueData，内有5个参数：
filesSelected，对话框中选中的文件数，
filesQueued添加到队列的文件数，
filesReplaced队列中被取代的文件数，
filesCancelled添加到队列后被删除的文件数，
filesErrored错误文件数
$(function()
$("#file_upload").uploadify(
'fileSizeLimit' : '50KB',
'overrideEvents' : ['onDialogClose'],
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onDialogClose' : function(queueData)
alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.');
);
);- onDialogOpen：在文件对话框打开时触发
<input type="file" name="file_upload" id="file_upload" />
<div id="message_box"></div>
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onDialogOpen' : function()
$('#message_box').html('The file dialog box was opened...');
);
);- onDisable：实例调用disable方法时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', true);">Disable Uploadify</a>
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onDisable' : function()
alert('You have disabled Uploadify!');
);
);- onEnable：当Uploadify按钮激活并调用disable方法时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', false);">Enable Uploadify</a>
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onEnable' : function()
alert('You can use Uploadify again.');
);
$('#file_upload').uploadify('disable', true);
);- onFallback：当浏览器的FLASH版本不兼容时触发
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onFallback' : function()
alert('Flash was not detected.');
);
);- onInit：在Uploadify初始化后触发
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onInit' : function(instance)
alert('The queue ID is ' + instance.settings.queueID);
);
);- onQueueComplete：在文件队列完成时触发，传参数对象queueData，uploadsSuccessful成功传送的文件数量，uploadsErrored上传出错的文件数量。
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onQueueComplete' : function(queueData)
alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
);
);- onSelect：当对话框的文件被选中时触发
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onSelect' : function(file)
alert('The file ' + file.name + ' was added to the queue.');
);
);onSelectError：选择文件出错时触发，此处有三个参数，
file出错的文件对象。
errorCode，错误代码：QUEUE_LIMIT_EXCEEDED，文件大小超出了推送到文件队列的限制值。FILE_EXCEEDS_SIZE_LIMIT文件大小超出了上传限制值。ZERO_BYTE_FILE，没大小的文件。INVALID_FILETYPE，文件类型符合。
errorMsg：没有重写默认事件的情况下，可使用this.queueData.errorMsg返回详细的错误信息。
$(function()
$("#file_upload").uploadify(
'fileSizeLimit' : '50KB',
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onSelectError' : function()
alert('The file ' + file.name + ' returned an error and was not added to the queue.');
);
);- onSWFReady：Flash对象加载完成时触发
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onSWFReady' : function()
alert('The Flash file is ready to go.');
);
);onUploadComplete：在每个文件上传完成时触发，无论成功还是出错。如果你想知道上传成功还是出错，请使用 onUploadSuccess和onUploadError 事件。
file，无论成功还是错误的上传文件对象。
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadComplete' : function(file)
alert('The file ' + file.name + ' finished processing.');
);
);onUploadError：上传出错时触发，其速有4个参数：
file：上传的文件对象
errorCode：返回的错误代码
errorMsg：返回的错误信息
errorString：易读的详细错误信息
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify-not-existing.php',
'onUploadError' : function(file, errorCode, errorMsg, errorString)
alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
);
);onUploadProgress：每次文件上传进度更新时触发，还有5个参数
file：上传的文件对象
bytesUploaded：已上传的文件字节数
bytesTotal：文件的总字节数
totalBytesUploaded：所有文件中当前已上传的总字节数
totalBytesTotal：所有上传文件的总字节数
<input type="file" name="file_upload" id="file_upload" />
<div id="progress"></div>
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)
$('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');
);
);- onUploadStart：在文件上传之前触发
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadStart' : function(file)
alert('Starting to upload ' + file.name);
);
);onUploadSuccess：上传成功后触发，还3个参数
file：上传成功的文件对象
data：服务端返回的数据
response：响应服务端返回的成功信息true，如返回false，则在successTimeout后呈现响应。
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadSuccess' : function(file, data, response)
alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
);
);方法
cancel：从队列中取消一个文件或文件的进度，带两个参数
fileID：想取消的文件ID，可以输入任意数量的文件id作为参数。如果输入“*”作为第一个参数,队列中的所有文件将被取消。如果没有设置文件ID作为参数,在队列中第一个文件将被取消。
suppressEvent：如果设置为真,那么onUploadCancel事件将被禁止。这在清除队列时很有用。
<input type="file" name="file_upload" id="file_upload" />
<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>
$(function()
$("#file_upload").uploadify(
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
);
);- destroy：摧毁Uploadify实例，并返回上传文件到其原始状态
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>- disable：禁用或启用上传按钮
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', true)">Disable the Button</a> | <a href="javascript:$('#file_upload').uploadify('disable', false)">Enable the Button</a>setting:返回或更新Uploadify实例的设置，三个参数：
name：设置选项的名称，如果只设置了此名称则返回该名称的值
value：设置选项的值
resetObjects：设置为true时，将更新postData对象，并替换已有的值，否则新值将添加到现有的postData对象中
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:changeBtnText()">Change the Button Text</a> | <a href="javascript:returnBtnText();">Read the Button</a>
$(function()
$("#file_upload").uploadify(
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
);
);
function changeBtnText()
$('#file_upload').uploadify('settings','buttonText','BROWSE');
function returnBtnText()
alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
- stop:停止当前的上传和文件队列的任何进度
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a> | <a href="javascript:$('#file_upload').uploadify('stop')">Stop the Uploads!</a>
$(function()
$("#file_upload").uploadify(
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
);
);upload:上传特定文件或文件队列中的所有文件，参数
fileID：你想上传的文件的ID，最简单的方法就是使用ID属性，如果‘*’作为第一个也是唯一一个传递参数,将上传队列中的所有文件。
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>
$(function()
$("#file_upload").uploadify(
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
);
);关于自定义服务端的上传程序：
自定义服务端上传程序uploadify只需回返回一个字符串就OK了，如果上传成功就返回1，上传失败就返回错误信息。以下以thinkphp的上传类来说下。
public function upload()
$upload = new \\Think\\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Uploads/'; // 设置附件上传根目录
$upload->savePath = ''; // 设置附件上传（子）目录
// 上传文件
$info = $upload->upload();
if(!$info) // 上传错误提示错误信息
echo($upload->getError());
else// 上传成功
echo(1);
转载自：http://www.jqcool.net/jquery-uploadify.html
以上是关于强大的jquery上传插件SWF版Uploadify参数详解的主要内容，如果未能解决你的问题，请参考以下文章
使用webuploader插件上传图片时如果正确 限制上传数量
前端开发：功能强大的jQuery文件上传插件（jQuery File Upload）