PHP Uploadify文档整理

文章有点长,没办法,要介绍的太多了。

Uploadify文档整理

直入正题
==============================
DEMO:http://help.mudbest.com/jquery/jquery-uploadify/
下载地址:jqeury-uploadify

部署
在部署一个Uploadify实例之前,必须确保满足最小需求:

jQuery 1.4.x or greater
swfObject 2.2 or greater
Flash Player 9.0.24 or greater

文件包里包含以下文件,路径随意,在引入相关文件的时候不要错了就行:
cancel.png
jquery.uploadify.v2.1.4.min.js
jquery-1.4.2.min.js
swfobject.js
uploadify.css
uploadify.php
uploadify.swf

在你的网站根目录新建一个页面,然后将以下代码粘帖到HTML文档的HEAD部分:

以下范例代码应用于Thinkphp。其他照搬吧。

JS部分:

<link href="/Public/uploadplus/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/Public/uploadplus/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Public/uploadplus/swfobject.js"></script>
<script type="text/javascript" src="/Public/uploadplus/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#file_upload').uploadify({
	'uploader'  : '/Public/uploadplus/uploadify.swf', // 默认上传主体文件
	'script'    : '/Member-Users-uploadprocess', // 默认处理上传文件
	'cancelImg' : '/Public/uploadplus/cancel.png', // 取消上传图片
	'folder'    : '/data/upload/updoc', // 上传到服务器的保存目录,默认/
	'multi'     : true, // 多文件上传
	'simUplaodLimit' : 5, // 多文件上传时候支持的最大文件数量型
	'queuesizeLimit' : 3, // 上传文件大小控制
	'auto'      : false,  // 选定文件是否自动上传
	'sizeLimit'	: 20971520,	//上传大小控制20M
	//'method' : 'GET',
	'fileExt'   : '*.pdf;*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.txt', //控制文件类型
	'fileDesc'  : 'Web Image Files (.pdf .doc .docx .ppt .pptx .xls .xlsx .txt)', //提示文件类型
	'onCancel'  : function(event,ID,fileObj,data){
		alert('将 '+fileObj.name + ' 从上传列表删除!');
	},
	'onAllComplete' : function(event,data) { //当所有文件上传结束进行相关处理		
				/////////////////////////////
				//在这里可以些上传后的提示
				///////////////////////////////	
			},
	'onComplete'	: function(event, ID, fileObj, response, data) {
			$('#file_upload').uploadifySettings('scriptData',{
					'policy': encodeURI(data.policy),
					'fileObjcreationDate' : fileObj.creationDate, //文件创建时间
					'fileObjsize' : fileObj.size //文件创建时间
			})
	  //alert('There are ' + fileObj.size + ' files remaining in the queue.');
	}
  });
});
</script>

*确保上传文件夹存在并且是可写的。
在页面的body部分,添加如下代码:

html部分:

<input id="file_upload" name="file_upload" type="file" />
<input type="button" name="upload" id="upload" value="uplaod files" onclick="$('#file_upload').uploadifyUpload();"/>

当页面被载入时,file域将被Uploadify文件上传组件自动替换。

接下来中文帮助文档来了
注意事项

我们强烈建议使用相对于网站根目录的路径(也就是以一个正斜杠’/'开始)。否则,Uploadify将使用相对于当前页面的路径。
应用于Uploadify的每个元素必须拥有一个唯一的ID属性。你可以参考引用class的元素,但是每个元素必须拥有一个唯一的ID。

如果你想要对Uploadify进行更多的定制,可以使用下面的可选项。

可选项

auto (布尔值)当文件被添加到队列时,自动上传。
类型:布尔型
取值格式:true / false
默认值:false
是否必须:可选
设置auto为true,当文件被添加至上传队列时,将会自动上传。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'auto'        : true
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />

buttonImg(字符串)浏览按钮的背景图片路径。
类型:字符串
取值格式:’/path/to/button-image.jpg’
默认值:null
是否必须:可选
buttonImg可以让你为flash按钮自定义一个背景图片。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'buttonImg'  : '/uploadify/button.jpg'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

buttonText(字符串)默认在按钮上显示的文本。
类型:字符串
取值格式:’Some Text’
默认值:’SELECT FILES’
是否必须:可选
buttonText可以让你改变显示在默认按钮上的文本。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'buttonText'  : 'Add to Queue!'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

cancelImg(字符串)取消按钮的背景图片路径。
类型:字符串
取值格式:’/path/to/cancel.png’
默认值:’cancel.png’
是否必须:是
cancelImg可以设置显示在每个上传项后面的取消按钮的背景图片。任何图像文件都可以使用,如果你想使用默认的图片样式,在uploadify的zip压缩包中包含有cancel.png。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

checkScript(字符串)用以检查服务器上已存在文件的后台脚本的路径。【ajax方式】
类型:字符串
取值格式:null
默认值:null
是否必须:可选
设置checkScript选项将检查上传文件夹中是否存在与当前文件上传队列中的文件同名的文件。后台脚本应该返回一个使用json格式编码后的数组,如果存在同名文件,该数组中包含有同名文件的文件名。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'checkScript' : '/uploadify/checkname.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

displayData(字符串)在上传过程中显示在队列里的数据类型。
类型:字符串
取值格式:’percentage’ / ‘speed’
默认值:’percentage’
是否必须:可选
displayData选项决定在上传期间什么样的数组将被显示在文件上传队列中。默认情况下,将显示上传进度的百分比。你可以将该选项的值设置为”speed”来显示上传速度,单位为KB/s。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'display'     : 'speed',
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

expressInstall(字符串)expressInstall.swf文件的路径。
类型:字符串
取值格式:/path/to/expressInstall.swf
默认值:null
是否必须:可选
设置expressInstall选项将在系统没有安装flash时指向expressInstall.swf的路径来进行安装。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'       : '/uploadify/uploadify.swf',
      'script'         : '/uploadify/uploadify.php',
      'cancelImg'      : '/uploadify/cancel.png',
      'folder'         : '/uploads',
      'expressInstall' : '/uploadify/expressInstall.swf'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

fileDataName(字符串)后台脚本中要处理的file域的名称。【就是type为file的input的name值】
类型:字符串
取值格式:’someString’
默认值:’Filedata’
是否必须:可选
fileDataName选项设置file域的name属性的值,当上传文件时flash文件将使用它。该值在后台脚本中被用来获取被上传文件的信息,即$_FILES数组。例如,如果你设置fileDataName的值为’uploadify’,在PHP脚本中你将使用$_FILES['uploadify']来获取上传文件的信息。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'     : '/uploadify/uploadify.swf',
      'script'       : '/uploadify/uploadify.php',
      'cancelImg'    : '/uploadify/cancel.png',
      'folder'       : '/uploads',
      'fileDataName' : 'Filedata'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

fileDesc(字符串)在浏览窗口底部的文件类型下拉菜单中显示的文本。
类型:字符串
取值格式:’someDescription’
默认值:null
是否必须:可选 – 当使用fileExt时则必须设置该选项。
fileDesc选项设置文件选择窗口的文件类型下拉菜单中显示的文本。当使用fileExt时,必须设置该选项。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'fileExt'     : '*.jpg;*.gif;*.png',
      'fileDesc'    : 'Web Image Files (.JPG, .GIF, .PNG)'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

fileExt(字符串)允许上传的文件后缀。【译者注:.jpg/.png等】
类型:字符串
取值格式:’*.ext;*.ext;*.ext;…’
默认值:null (all files allowed)
是否必须:可选
fileExt选项允许你限制上传文件的类型。这一特效很容易攻击者被绕过,所以强烈建议您在后台脚本中校验上传文件的类型。这个选项仅仅限制显示在文件选择窗口中的文件,当使用fileExt时,fileDesc选项必须被设置。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'fileExt'     : '*.jpg;*.gif;*.png',
      'fileDesc'    : 'Web Image Files (.JPG, .GIF, .PNG)'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

folder(字符串)上传文件夹的路径,文件上传后将被保存于此。
类型:字符串
取值格式:’/path/to/save/folder/’
默认值:empty (使用uploadify的js脚本所在的文件夹)
是否必须:必须 – 如果在后台上传脚本中指明,则可以不设置。
folder选项允许你设置服务器的上传文件夹。这是一个不安全的设置文件保存目录的方法,所以强烈建议您在后台脚本中设置文件上传目录。除非在后台脚本(uploadify.php和check.php)中定义了文件上传目录,否则该选项是必须设置的。确保在文件上传之前,已经建立了上传文件夹,否则上传时将返回错误。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

height(整型)浏览按钮的高度。
类型:整型
取值格式:整型数值
默认值:30
是否必须:可选
height选项设置flash按钮的高度,单位为像素。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'height'      : 50
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

hideButton(布尔型)设置为true将隐藏flash按钮,这样你就可以为下面的div元素定义样式。
类型:布尔型
取值格式:true / false
默认值:false
是否必须:可选
hideButton选项允许你设置flash按钮的不透明度为0,这样你就可以定义位于其下的div的样式。当使用该选项时,wmode选项应该被设置为’transparent’。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'wmode'       : 'transparent',
      'hideButton'  : true
    });

html代码部分

    <style>
    #file_uploadUploader {
      background: url('/uploadify/button.jpg') no-repeat;
    }
    </style>
    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

method(字符串)向后台脚本放送数据的表单方法。
类型:字符串
取值格式:’POST’ / ‘GET’
默认值:’POST’
是否必须:可选
method选项设置文件上传时的表单方法。该选项的值将影响后台脚本中引用变量的方式。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'method'      : 'post'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

multi(布尔型)设置为true将允许多文件上传。
类型:布尔型
取值格式:true / false
默认值:false
是否必须:可选
multi选项允许用户添加多个文件到上传队列。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'multi'       : true
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

queueID(字符串)页面中,你想要用来作为文件队列的元素的id。
类型:字符串
取值格式:’someID’
默认值:null
是否必须:可选
queueID选项允许你设置一个拥有唯一ID的DOM元素来作为显示上传队列的容器。如果没有设置该选项,uploadify将在flash按钮的下方自动创建一个显示上传队列的容器。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'       : '/uploadify/uploadify.swf',
      'script'         : '/uploadify/uploadify.php',
      'cancelImg'      : '/uploadify/cancel.png',
      'folder'         : '/uploads',
      'multi'          : true,
      'queueSizeLimit' : 3,
      'queueID'        : 'queue'
    });

html代码部分

    <div style="background-color: #505050; height: 200px; margin-bottom: 10px; padding:10px; overflow: auto; width: 374px;" id="queue"></div>
    <input type="file" id="file_upload" name="file_upload" /><br />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

queueSizeLimit(整型)上传队列中所允许的文件数量。
类型:整型
取值格式:整型数值
默认值:999
是否必须:可选
queueSizeLimit选项允许你设置同时处于上传队列中的文件最大数量。如果用户尝试添加的文件数量超出了限制,onQueueFull函数将被触发。 multi选项应该跟此选项一起配合使用。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'       : '/uploadify/uploadify.swf',
      'script'         : '/uploadify/uploadify.php',
      'cancelImg'      : '/uploadify/cancel.png',
      'folder'         : '/uploads',
      'multi'          : true,
      'queueSizeLimit' : 3
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

removeCompleted(布尔型)设置为true将自动移除队列中已经完成上传的项目。
类型:布尔型
取值格式:true / false
默认值:true
是否必须:可选
不设置该选项或者将其设置为false,将使上传队列中的项目始终显示于队列中,直到点击了关闭按钮或者队列被清空。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'        : '/uploadify/uploadify.swf',
      'script'          : '/uploadify/uploadify.php',
      'cancelImg'       : '/uploadify/cancel.png',
      'folder'          : '/uploads',
      'removeCompleted' : false,
      'multi'           : true
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

rollover(布尔型)设置为true将激活浏览按钮的鼠标划过状态。
类型:布尔型
取值格式:true / false
默认值:false
是否必须:可选
使用rollover选项将会激活flash按钮的鼠标划过状态。当鼠标停留在按钮上时,下面按钮的鼠标划过状态将被激活,并且默认的off状态将变成hover,并且这种状态的改变是通过同一张图片完成的(请看示例)。 此选项应该和buttonImg选项配合使用。

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'buttonImg'   : '/uploadify/rollover-button.png',
      'rollover'    : true
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

script(字符串)处理文件上传的后台脚本的路径。
类型:字符串
取值格式:null
默认值:null
是否必须:是
/path/to/uploadify.php
script选项是必须指定的,它指向一个处理上传文件的后台脚本。后台脚本可以使用任何服务器端语言编写,Uploadify的源码包里提供的是PHP脚本,你可以对其进行修改来满足自己的开发需求。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

scriptAccess(字符串)设置在主swf文件中的脚本访问模式。
类型:字符串
取值格式:’sameDomain’ / ‘always’
默认值:’sameDomain’
是否必须:可选
scriptAccess选项为flash按钮设置scriptAccess属性。一旦设置了该属性,如果flash文件和html页面位于不同的域,它通常能避免一些测试过程中的问题,比如:通信问题。出于安全考虑,”sameDomain”应该被用于生产环境。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'     : '/uploadify/uploadify.swf',
      'script'       : '/uploadify/uploadify.php',
      'cancelImg'    : '/uploadify/cancel.png',
      'folder'       : '/uploads',
      'scriptAccess' : 'sameDomain'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

scriptData(JSON object with mixed types)在文件上传时,应该被发送给后台脚本的一个包含name/value键值对以及一些额外信息的json对象。
类型:JSON对象
取值格式:{name:value,name:value,name:value,…}
默认值:null
是否必须:可选
scriptData选项允许你在上传期间向后台脚本发送额外的数据。你可以在后台脚本中调用scriptData的值,就像调用表单提交的数据一样。(比如:$_POST['scriptDataVariable'])。如果要发送动态数据,你可以将此选项与.uploadifySettings()方法一起配合使用。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'scriptData'  : {'firstName':'Ronnie','age':30}
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

simUploadLimit(整型)允许同时上传的文件数量。
类型:整型
取值格式:整型数值
默认值:1
是否必须:可选
simUploadLimit选项允许你设置同时上传文件的最大数量。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'       : '/uploadify/uploadify.swf',
      'script'         : '/uploadify/uploadify.php',
      'cancelImg'      : '/uploadify/cancel.png',
      'folder'         : '/uploads',
      'multi'          : true,
      'simUploadLimit' : 2
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

sizeLimit(整型)上传文件的大小限制,单位为字节。
类型:整型
取值格式:整型数值
默认值:null
是否必须:可选
sizeLimit选项允许你设置单个上传文件的大小限制,单位为字节。如果文件大小超过了限制,在上传时将会返回一个错误。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'sizeLimit'   : 102400
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

uploader(字符串)uploadify.swf文件的路径。
类型:字符串
取值格式:null
默认值:null
是否必须:可选
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

width(整型)浏览按钮的宽度。
类型:整型
取值格式:整型数值
默认值:120
是否必须:可选
width选项设置flash按钮的宽度,单位为像素。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'width'       : 250
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

wmode(字符串)flash文件的wmode。
类型:字符串
取值格式:’opaque’ / ‘transparent’
默认值:’opaque’
是否必须:可选
wmode选项设置flash按钮的wmode值,设置wmode为’transparent’将使文件的背景透明,但是该文件将位于页面的最顶层。如果一个选择下拉菜单与一个wmode属性值为’transparent’的flash按钮重叠在一起,下拉菜单会显示在flash按钮下方。
DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'wmode'       : 'transparent'
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

事件

onAllComplete(函数)当上传队列中的所有文件都完成上传时触发。
类型:函数
函数声明:function(event,data) { some code }
是否必须:可选
onAllComplete选项允许你设置一个自定义函数,该函数将在上传队列中的所有文件上传完成后触发。默认的函数将清除错误数组,如果你设置的自定义函数返回false,默认的onAllComplete将不会运行。
参数:
event
event对象。【译者注:事件对象】

data
一个含有上传信息的对象。

[filesUploaded] – 上传文件总数。
[errors] – 发生的错误总数。
[allBytesLoaded] – 上传的总字节数。
[speed] – 上传的平均速度,单位为KB/s。

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'      : '/uploadify/uploadify.swf',
      'script'        : '/uploadify/uploadify.php',
      'cancelImg'     : '/uploadify/cancel.png',
      'folder'        : '/uploads',
      'onAllComplete' : function(event,data) {
          alert(data.filesUploaded + ' files uploaded successfully!');
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onCancel(函数)当从上传队列每移除一个文件时触发一次。
类型:函数
函数声明:function(event,ID,fileObj,data) {}
是否必须:可选
设置onCancel选项,在文件上传被取消时,将允许运行一个自定义函数。默认的函数行为将移除上传队列中的项目,当上传队列被清除时,该函数也会触发【译者注:每移除一个项目就会触发一次】。如果自定义函数返回false,默认的函数将不会执行。
参数:
event
event对象。【译者注:事件对象】

ID
被取消上传的文件的唯一标识。

fileObj
一个含有被选择文件详细信息的对象。

[name] – 文件名称
[size] – 文件大小,单位为字节
[creationDate] – 文件创建日期
[modificationDate] – 文件最后修改日期
[type] – 文件后缀,以’.'开始

data
文件上传队列的详细信息。

[fileCount] – 上传队列中剩下的文件总数。
[allBytesTotal] – T上传队列中剩下文件的总大小,单位为字节。

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'onCancel'    : function(event,ID,fileObj,data) {
          alert('The upload of ' + fileObj.name + ' has been canceled!');
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onCheck(函数)在上传开始之前,如果检测到一个同名文件时触发。
类型:函数
函数声明:function() {}
是否必须:可选
设置onCheck选项,当在服务器上发现一个与上传文件同名的文件时,将允许你执行一个函数。同名文件检查在文件上传之前开始,默认的函数将提示用户是否要确认覆盖已有文件,如果用户选择不覆盖,上传将取消。如果你自定义的函数返回false,默认的函数将不会执行。checkScript选项必须和此选项串联使用。
参数:
event
event对象。【译者注:事件对象】

data
一个含有服务器上所有同名文件的文件名的对象。对象中每个文件名的键名就是上传队列中与之同名文件的唯一id。

key
在服务器上被检测到的同名文件的唯一id。

附注:
如果要取消一个文件上传,在你的函数中使用下面这行代码:
document.getElementById(jQuery(event.target).attr(‘id’) + ‘Uploader’).cancelFileUpload(key,true,true);

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'checkScript' : '/uploadify/check.php',
      'onCheck'     : function(event,data,key) {
          $('#file_upload' + key).find('.percentage').text(' - Exists');
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onClearQueue(函数)当uploadifyClearQueue()方法被调用时触发。
类型:函数
函数声明:function(event) {}
是否必须:可选
设置onClearQueue选项,当文件队列用.uploadifyClearQueue() 方法清除时,允许你运行一个自定义函数。默认的函数行为将移除队列中的所有项目,如果函数返回false,默认的函数将不会执行。
参数:
event
event对象。【译者注:事件对象】

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'     : '/uploadify/uploadify.swf',
      'script'       : '/uploadify/uploadify.php',
      'cancelImg'    : '/uploadify/cancel.png',
      'folder'       : '/uploads',
      'multi'        : true,
      'onClearQueue' : function(event) {
          alert('The queue has been cleared.');
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>
    <a href="javascript:$('#file_upload').uploadifyClearQueue();">Clear File Queue</a>

onComplete(函数)每完成一次文件上传时触发一次。
类型:函数
函数声明:function(event, ID, fileObj, response, data) {}
是否必须:可选
使用onComplete函数,当每一个文件完成上传时都允许你触发一个自定义的函数。默认的函数行为将把文件队列中已经上传的项目标记为完成,如果removeCompleted选项被启用,已经完成的项目将被清除出文件队列。如果自定义函数返回false,默认的函数将不会执行。
参数:
event
event对象。【译者注:事件对象】

ID
文件队列中项目的唯一ID。

fileObj
一个含有文件信息的对象。

[name] – 已上传文件的名称
[filePath] – 已上传文件在服务器上的路径
[size] – 文件的大学,单位为字节
[creationDate] – 文件的创建日期
[modificationDate] – 文件的最后修改日期
[type] – 文件的扩展名,以‘.’开始

response
由后台上传脚本返回的文本值。

data
一个含有关于上传和文件队列主要信息的对象。

[fileCount] – 队列中现存文件的数量
[speed] – 文件上传的平均速度,单位为KB/s

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'multi'       : true,
      'onComplete'  : function(event, ID, fileObj, response, data) {
          alert('There are ' + data.fileCount + ' files remaining in the queue.');
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onError(函数)当上传返回错误时触发。
类型:函数
函数声明:function(event,ID,fileObj,errorObj) {}
是否必须:可选
使用onError选项,当在上传过程中返回错误时,将允许你触发一个自定义的函数。默认的函数行为将错误等级添加至文件队列中的对应项目。如果你的自定义函数返回false,默认的函数将不会执行。
参数:
event
event对象。【译者注:事件对象】

ID
上传时返回错误的文件的唯一标识。

fileObj
一个含有被选择文件详细信息的对象。

[name] – 文件名称
[size] – 文件的大小,单位为字节
[creationDate] – 文件的创建日期
[modificationDate] – 文件的最后修改日期
[type] – 文件的扩展名,以’.'开始

errorObj
一个含有返回错误详细信息的对象。

[type] – 可能的值有:’HTTP’, ‘IO’或者’Security’
[info] – 一条描述错误类型的信息。

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      // 指向一个不存在的后台文件将触发错误。
      'script'      : '/uploadify/uploadify-x.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'onError'     : function (event,ID,fileObj,errorObj) {
          alert(errorObj.type + ' Error: ' + errorObj.info);
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onInit(函数)当Uploadify实例被载入时触发。
类型:function
函数声明:function() {}
是否必须:可选
使用onInit选项,当Uploadify初始化时允许你运行一个自定义函数。默认的函数行为将隐藏应用于Uploadify的DOM元素,然后会创建一个flash按钮和文件队列的实例。如果自定义函数返回false,默认的函数将不会执行,但是你为什么会想那么做?【老外的幽默,o(∩_∩)o 哈哈!】
参数:
无参数

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'onInit'      : function() {
          alert('Uploadify rocks my socks!');
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onOpen(函数)当上传队列中的一个文件开始上传时就触发一次。
类型:function
函数声明:function(event,ID,fileObj) {}
是否必须:可选
使用onOpen选项,当一个文件被打开上传时,运行你触发一个自定义函数。此选项没有对应的默认函数。由于同步问题,如果在onOpen自定义函数的内部使用.uploadifySettings()方法修改scriptData选项,可能会运行不正常。
参数:
event
event对象。【事件对象】

ID
被打开文件的唯一标识。

fileObj
一个含有被打开文件的详细信息的对象。

[name] – 文件名
[size] – 文件大小,单位为字节
[creationDate] – 文件的创建日期
[modificationDate] – 文件的最后修改日期
[type] – 文件的扩展名,以’.'开始

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'onOpen'      : function(event,ID,fileObj) {
          $('#uploader_message').text('The upload is beginning for ' + fileObj.name);
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <div id="uploader_message"></div>
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onProgress(函数)在上传过程中触发。
类型:函数
函数声明:function(event,ID,fileObj,data) {}
是否必须:可选
使用onProgress选项,当文件的上传进度发生改变时允许你触发一个函数。默认函数将更新进度条的长度和上传百分比。如果自定义函数返回false,默认的函数不会执行。
参数:
event
event对象。【译者注:事件对象】

ID
被上传文件的唯一ID。

fileObj
一个含有被选择文件详细信息的对象。

[name] – 文件名
[size] – 文件大小,单位为字节
[creationDate] – 文件的创建日期
[modificationDate] – 文件的最后修改日期
[type] – 文件的扩展名,以’.'开始

data
一个含有上传与文件队列相关详细信息的对象。

[percentage] – 当前完成上传的百分比
[bytesLoaded] – 当前上传的字节数
[allBytesLoaded] – 当前队列中所有文件的总字节数
[speed] – 当前上传的速度,单位为KB/s

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'removeCompleted' : false,
      'onProgress'  : function(event,ID,fileObj,data) {
          var bytes = Math.round(data.bytesLoaded / 1024);
          $('#' + $(event.target).attr('id') + ID).find('.percentage').text(' - ' + bytes + 'KB Uploaded');
          return false;
        }
    });

html代码部分

    <style>.uploadifyProgress{display:none;}</style>
    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onQueueFull(函数)当文件数量达到上传队列限制时触发。
类型:函数
函数声明:function(event,queueSizeLimit) {}
是否必须:可选
使用onQueueFull选项,当上传队列中的文件数量超过了queueSizeLimit设置的最大值时,将允许你触发一个自定义函数。默认的函数会弹出一个警告,通知用户上传队列已经满了,需要注意队列中的文件总数。如果采用批量选择时,选取的文件数量超过了限制,超过限制的部分将不会添加至上传队列【译者注:如果数量限制为5,你选择了7个,那么多于的2个将不添加】并且函数将被触发。如果自定义函数返回false,默认的函数将不会执行。
参数:
event
event对象。【译者注:事件对象】

queueSizeLimit
由queueSizeLimit选项设置的文件上传队列中所允许的文件最大数量。

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'       : '/uploadify/uploadify.swf',
      'script'         : '/uploadify/uploadify.php',
      'cancelImg'      : '/uploadify/cancel.png',
      'folder'         : '/uploads',
      'queueSizeLimit' : 3,
      'multi'          : true,
      'onQueueFull'    : function (event,queueSizeLimit) {
          alert("I'm stuffed, please don't put anymore files in me!");
          return false;
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onSelect(函数)每向上传队列添加一个文件时触发。
类型:函数
函数声明:function(event,ID,fileObj) {}
是否必须:可选
使用onSelect选项,每添加一个文件至上传队列时,允许你运行一个自定义函数。默认的函数行为将为被选取的文件创建一个队列选项并将其添加至上传队列。如果自定义函数返回false,默认函数将不会运行。
参数:
event
event对象。【译者注:事件对象】

ID
被选择文件的唯一ID。

fileObj
一个含有被选择文件详细信息的对象。

[name] – 文件名
[size] – 文件大小,单位为字节
[creationDate] – 文件的创建日期
[modificationDate] – 文件的最后修改日期
[type] – 文件的扩展名,以’.'开始

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'multi'       : true,
      'onSelect'    : function(event,ID,fileObj) {
          alert('The file ' + fileObj.name + ' was added to the queue.');
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onSelectOnce(函数)每向上传队列添加一个或一组文件时触发。
类型:函数
函数声明:function(event,data) {}
是否必须:可选
使用onSelectOnce选项,当一次性添加若干文件至上传队列时,允许你运行一个自定义函数【译者注:与onSelect的区别主要反应在批量选择上,假设同样选择4个文件onSelect定义的函数会触发4次,而onSelectOnce对应的函数则只触发一次。大家可以通过示例来加深理解。】。此选项没有默认函数。
参数:
event
event对象。【译者注:事件对象】

data
一个含有关于选择操作详细信息的对象。

[fileCount] – 队列中的文件总数
[filesSelected] – 在选择操作中被选择的文件总数
[filesReplaced] – 队列中被替换的文件数量
[allBytesTotal] – 队列中所有文件的总字节数

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'     : '/uploadify/uploadify.swf',
      'script'       : '/uploadify/uploadify.php',
      'cancelImg'    : '/uploadify/cancel.png',
      'folder'       : '/uploads',
      'multi'        : true,
      'onSelectOnce' : function(event,data) {
          alert(data.filesSelected + ' files were selected for upload.');
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

onSWFReady(函数)当flash文件载入完成时触发。
类型:函数
函数声明:function() {}
是否必须:可选
使用onSWFReady选项,当flash按钮载入完毕时允许你运行一个自定义函数。此选项对于依赖于flash文件的行为很有用。此选项没有默认函数。
参数:
无参数

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'onSWFReady'  : function() {
          alert('The flash button has been loaded.');
        }
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

方法
.uploadify() 创建Uploadify上传组件的一个实例。
$(‘#someId’).uploadify(options);
.uploadify()方法将创建一个Uploadify的实例来代替页面上的一个DOM元素。应该为Uploadify实例指定一个唯一ID,最好是一个类型为file的input控件。
参数:
options
options是一个JSON对象,其中含有Uploadify可选项的name/value键值对。

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'multi'       : true
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

.uploadifyCancel()从上传队列移除一个文件。如果文件正在上传,该方法将先取消上传,然后再将文件移除出上传队列。
$(‘#someID’).uploadifyCancel(ID);
.uploadifyCancel()方法可以从上传队列中移除一个文件。如果文件正在上传,上传动作将被取消并且文件将被移除出上传队列。当该方法被调用时,uploadifyCancel事件将触发,而onCancel事件定义的方法将被调用。
参数:
ID (Required)
你想要移除的文件的唯一ID,此ID是当文件被选择并添加至上传队列时,由Uploadify脚本生成的。

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'multi'       : true
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a> 
    |
    <a href="javascript:$('#file_upload').uploadifyCancel($('.uploadifyQueueItem').first().attr('id').replace('file_upload',''))">Cancel First File</a>

.uploadifyClearQueue()将所有文件移除出上传队列,并且取消正在执行的所有上传。
$(‘#someID’).uploadifyClearQueue();
.uploadifyClearQueue()方法触发uploadifyClearQueue事件和onClearQueue选项指定的函数。默认的函数行为取消所有上传动作并且清除上传队列中的所有文件。
参数:
无参数

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'multi'       : true
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" /><br />
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a> 
    | 
    <a href="javascript:$('#file_upload').uploadifyClearQueue();">Clear Queue</a>

.uploadifySettings()改变Uploadify组件的可选参数。
$(‘#someID’).uploadifySettings(name,value,resetObject);
.uploadifySettings()方法能够被用来改变Uploadify的特定设置。这个方法有2个参数,第一个是你想要改变的选项的名称;第二个是你想要设置的新的值。如果省略第二个参数,该方法将返回选项的当前值。
以下设置可以被更改:
buttonImg
buttonText
cancelImg
fileDesc
fileExt
folder
height
hideButton
script
scriptData
simUploadLimit
sizeLimit
width

注意: 当改变scriptData的值时,应该使用含有name/value键值对的JSON对象。如果一个scriptData键名已经存在,它对应的值将被新值覆盖。如果键名不存在,它将被创建。要移除一个键名,设置它对应的值为null。如果使用uploadifySettings()更新scriptData选项的值,由于onOpen事件引起的同步问题,它将不会起作用。但是,你可以在自动上传过程中使用onSelectOnce方法来对scriptData进行多种修改。

参数:
name
你想要修改或者更新的设置的名称。

value (可选)
你想要设置的值。如果省略,将返回当前设置的值。

resetObject (可选)
如果在更新scriptData的值时,要清除已存在的scriptData对象,设置这个参数的值为true。

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'auto'        : true
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifySettings('buttonText','Browse');">Change Button Text</a>

.uploadifyUpload()触发上传。
$(‘#someID’).uploadifyUpload(ID);
调用.uploadifyUpload()方法将开始上传文件队列中的文件。
参数:
ID (可选)
你想要上传的文件ID。此ID是当文件被选择并添加至上传队列时,由Uploadify脚本生成的。如果省略该参数,文件队列中的所有文件都将开始上传。

DEMO:
JS代码部分

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'multi'       : true
    });

html代码部分

    <input type="file" id="file_upload" name="file_upload" />
    <a href="javascript:$('#file_upload').uploadifyUpload($('.uploadifyQueueItem').last().attr('id').replace('file_upload',''));">Upload Last File</a>

Leave a Reply

(will not be published)