强大的jquery上传组件SWF版Uploadify参数详解

表单fishcity7个月前 (12-15)1607浏览

说到Uploadify，不用说网络上很都在用，这毕竟个比较强悍的上传插件，但遗憾的是的其html5版是收费的，5刀，需要的可以去其官网网页下载。屌丝的jQ酷只能讲下swf版了，这个是免费的，功能很超强，缺点就是不支持水果。

Uploadify内置了许多参数，方法，事件等，使用出来方便便捷，官方有具体的方档，当然都是英文的，嘻嘻。至于Uploadify有多强大，就不说了，亲自验证吧，本文讲解的Uploadify 3.2.1版，咱们就来具体的知道下各项参数吧。

jquery实例：Uploadify使用图解

引入核心文件

<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<scripttype="text/javascript"src="/jquery.uploadify-3.1.min.js"></script>

构建html

写入JS

$('#file_upload').uploadify({

'swf':'uploadify.swf',//uploadify.swf文件的相对JS文件的路径

'uploader':'uploadify.php'//后台处理程序的相对模式

//更多的参数

基础的示例代码

<!DOCTYPEhtml>

<title>MyUploadifyImplementation</title>

<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<scripttype="text/javascript"src="jquery.uploadify-3.1.min.js"></script>

$('#file_upload').uploadify({

'swf':'uploadify.swf',

'uploader':'uploadify.php'

//Youroptionshere

参数

auto:布尔类型，设置为true时，选择文件后将手动上传，设置为false则必须读取上传方式触发,以下为例子代码，下文就不写完整的代码了，亲们照着添加进去就可以了。

$("#file_upload").uploadify({

'swf':'/uploadify/uploadify.swf',

'uploader':'/uploadify/uploadify.php'

buttonClass：设置按键的风格类，注意：样式的hover也修改下。

'buttonClass':'some-class',//自定义的样式类名

buttonCursor：默认值为hand，定义键盘悬浮于按键时的样式

buttonImage:默认值null，定义按键的背景图片，同时需定义下按钮的CSS

<styletype="text/css">

.uploadify-button{

.uploadify:hover.uploadify-button{

</style>

<inputtype="file"name="file_upload"id="file_upload"/>

$("#file_upload").uploadify({

'buttonImage':'/uploadify/browse-btn.png',

'swf':'/uploadify/uploadify.swf',

'uploader':'/uploadify/uploadify.php'

buttonText：默认值SELECT FILES，定义按钮的文字

checkExisting：默认值false，定义后台检查文件能否存的程序，存在返回1，不存在返回0

'checkExisting':'/uploadify/check-exists.php',

debug：布尔值，默认值false，如修改为true开始debug路径

fileObjName：默认值Filedata，服务端调用的上传项的名称，以PHP为例，如果此项设置为the_files，那么在服务端获取时使用$_FILES['the_files']。

fileSizeLimit：限制上传文件的大小，默认单位KB，可以是B, KB, MB, or GB，设为0则不限制大小。

fileTypeDesc：默认值：All Files，可选的文件类别，这个字符串出现在浏览文件对话框的文件类别下拉列表中。

'fileTypeDesc':'ImageFiles',

fileTypeExts:默认值*.*，定义可以上传的文件类型

'fileTypeExts':'*.gif;*.jpg;*.png',

formData：JSON类型，默认为Empty Object包含额外数据的JSON对象，在上传文件时借助POST或get方法发送给服务端。如PHP可通过$_GET or $_POST 来获取。

height：默认30，单位像素，上传图标的高度

itemTemplate：默认值false，指定一个html模版给每个上传返回的数据，并添加上queue中。这里有的个变量需修改。

instanceID：Uploadify实例ID，fileID：加入到queue的文件ID，fileName：加入到queue的文件名,fileSize：加入到queue的文件大小。模板中函数这种使用${fileName}，具体代码如下

'itemTemplate':'<divid="${fileID}"class="uploadify-queue-item">\

<divclass="cancel">\

<ahref="javascript:$(\'#${instanceID}\').uploadify(\'cancel\',\'${fileID}\')">X</a>\

<spanclass="fileName">${fileName}(${fileSize})</span><spanclass="data"></span>\

method：默认值post，表单提交的方式。

multi：默认值true，是否允许多文件上传。

overrideEvents：默认值Empty Array，接受一个JSON数组，把想重写的事件名称写到数组内即可进行重写。

'overrideEvents':['onUploadProgress'],

preventCaching：默认为true，为真时一个随机数将会添加上SWF文件的URL上，这样就不会被缓存。

progressData：默认值percentage，上传数据时有queue显示的进度显示模式，两个类型percentage’ 和 ‘speed’.

queueID：默认值false，queue DOM元素的ID，如果设为false，将生成一个文件队列和queueID将被动态设置

#some_file_queue{

border-radius:3px;

box-shadow:01px3pxrgba(0,0,0,0.25);

margin-bottom:10px;

padding:5px10px;

$("#file_upload").uploadify({

'swf':'/uploadify/uploadify.swf',

'uploader':'/uploadify/uploadify.php'

queueSizeLimit：默认值999，容纳文件队列的最大数

removeCompleted：默认值true，设置为false时，queue显示的结果仍然显示。

removeTimeout：默认值3，单位秒。文件上传完后延时隐藏queue队列。

requeueErrors：默认值false，设为真时，上传出错时将返回错误信息，并重新重试上传。

$("#file_upload").uploadify({

'swf':'/uploadify/uploadify.swf',

'uploader':'/uploadify/not_here.php',

console.log('Attemptingtoupload:'+file.name);

successTimeout：默认值30秒，文件上传完成时等待服务器响应的时间uploadify 调用2次，之后显示成功信息。

'successTimeout':5,

swf：默认值uploadify.swf，uploadify.swf的相对模式。

uploader：后台处理程序的相对模式，默认值uploadify.php

'uploader':'/uploadify/uploadify.php'

uploadLimit：默认值999，上传的最大文件数

width：默认值120，单位为像素，上传图标的宽度

事件

onCancel：文件从队列中移除时触发

<ahref="javascript:$('#file_upload').uploadify('upload')">UploadFiles</a>

$("#file_upload").uploadify({

'swf':'/uploadify/uploadify.swf',

'uploader':'/uploadify/uploadify.php',

alert('Thefile'+file.name+'wascancelled.');

onClearQueue：在cancel方法被传参“*”调用时触发

<ahref="javascript:$('#file_upload').uploadify('cancel','*');">ClearQueue</a>

$("#file_upload").uploadify({

'swf':'/uploadify/uploadify.swf',

'uploader':'/uploadify/uploadify.php',

'onClearQueue':function(queueItemCount){

alert(queueItemCount+'file(s)wereremovedfromthequeue');

onDestroy：在调用destroy方法时触发

<ahref="javascript:$('#file_upload').uploadify('destroy')">DestroyUploadify</a>

$("#file_upload").uploadify({

'swf':'/uploadify/uploadify.swf',

'uploader':'/uploadify/uploadify.php',

alert('Iamgettingdestroyed!');

onDialogClose：在文件对话框关闭时触发。参数为一个对象queueData，内有5个参数：

filesSelected，对话框中选中的文件数，

filesQueued添加到队列的文件数，

filesReplaced队列中被取代的文件数，

filesCancelled添加到队列后被删除的文件数，

filesErrored错误文件数

$("#file_upload").uploadify({

'overrideEvents':['onDialogClose'],

'swf':'/uploadify/uploadify.swf',

'uploader':'/uploadify/uploadify.php',

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-120671-1.html