强大的jquery上传插件SWF版Uploadify参数详解
来源:互联网 发布:党章党规网络测试题 编辑:程序博客网 时间:2024/05/23 01:18
强大的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参数详解
- Uploadify--JQuery的上传插件
- JQuery上传插件Uploadify并传参数
- jQuery上传插件uploadify 3.2.1 参数
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
- JQuery上传插件Uploadify使用详解【struts2+uploadify+jquery】
- java版-JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- jQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery 上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- Java基础--数组
- Windows环境下使用python selenium 打开Firefox的问题总结
- 枚举的用法
- 关于SAP的号码范围(number range)
- 关于“因为数据库正在使用,所以无法获得对数据库的独占访问权”的最终解决方案
- 强大的jquery上传插件SWF版Uploadify参数详解
- 浅谈开博
- JavaScript鼠标滑过动画效果
- iOS开发之蓝牙4.0技术(详解)
- SAP TableControl 控制单个单元格输入
- 学习Javascript闭包(Closure)
- Python Web 开发学习 - 学习笔记(3)- 解释器
- 自定义View-获取界面的rootview
- hdu 5901(模板,10^11以内的素数个数)