query上传插件uploadify参数详细分析
2013-10-16 14:36
489 查看
Uploadify Version 3.2
官网：http://www.uploadify.com/
注：文件包里有两个js分别是：jquery.uploadify.js 和 jquery.uploadify.min.js，两者其实一样，只需载入其中一个js即可。很明显jquery.uploadify.min.js是封装好了的，开发人员推荐使用前者。
Options选项设置
auto 选择文件后自动上传
buttonClass 给“浏览按钮”加css的class样式
buttonCursor 鼠标移上去形状：arrow箭头、hand手型（默认）
buttonImage 鼠标移上去变换图片
buttonText 按钮文字
checkExisting 在目录中检查文件是否已上传成功（1 ture,0 false）
debug 是否显示调试框（默认不显示false）
fileObjName 设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata，$tempFile = $_FILES['Filedata']['tmp_name']
fileSizeLimit 设置允许上传文件最大值B, KB, MB, GB 比如：'fileSizeLimit' : '20MB'
fileTypeDesc 选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认：All Files
fileTypeExts 允许上传的文件类型。格式：'fileTypeExts' : '*.gif; *.jpg; *.png'
formData 附带值，需要通过get or post传递的额外数据，需要结合onUploadStart事件一起使用
height “浏览按钮”高度px
itemTemplate <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。
method 上传方式。默认：post
multi 选择文件时是否可以【选择多个】。默认：可以true
overrideEvents 不执行默认的onSelect事件
preventCaching 随机缓存值 默认true ，可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突
progressData 进度条上显示的进度:有百分比percentage和速度speed。默认百分比
queueID 给“进度条”加背景css的ID样式。文件选择后的容器ID
queueSizeLimit 允许多文件上传的数量。默认：999
removeCompleted 上传完成后队列是否自动消失。默认：true
removeTimeout 上传完成后队列多长时间后消失。默认 3秒 需要：'removeCompleted' : true,时使用
requeueErrors 队列上传出错，是否继续回滚队列，即反复尝试上传。默认：false
successTimeout 上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认：30秒
swf swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略
uploader 上传处理程序URL，本参数不可省略
uploadLimit 限制总上传文件数,默认是999。指同一时间，如果关闭浏览器后重新打开又可上传。
width “浏览按钮”宽度px
Events 事件
onCancel 当取消一个上传队列中的文件时触发,删除时触发
onClearQueue 清除队列。当'cancel'方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数（另外的按钮）
onDestroy 取消所有的上传队列（另外的按钮）
onDialogClose 当选择文件对话框关闭时触发,不论是点的'确定'还是'取消'都会触发.如果本事件被添加进了'overrideEvents'参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出
onDialogOpen 当选择文件框被打开时触发,没有传过来的参数
onDisable 关闭上传
onEnable 开启上传
onFallback 检测FLASH失败调用
onInit 每次初始化一个队列时触发
onQueueComplete 当队列中的所有文件上传完成时触发
onSelect 当文件从浏览框被添加到队列中时触发
onSelectError 选择文件出错时触发
onSWFReady flash准备好时触发
onUploadComplete当一个文件上传完成时触发
onUploadError 当文件上传完成但是返回错误时触发
onUploadProgress上传汇总
onUploadStart 一个文件上传之间触发（动态改变参数的值，此方法很重要，当在多文件跨服务器上传时，你要给每个文件赋值不同的OnlyKey，即修改formData数据，服务器上的文件和数据库的OnlyKey一致，必须用到此方法）
onUploadSuccess 每个上传完成并成功的文件都会触发本事件
Methods 方法
cancel 取消一个上传队列
destroy 取消所有上传队列
disable 禁止点击“浏览按钮”
settings 返回或修改一个 uploadify实例的settings值
stop 停止当前的上传并重新添加到队列中去
upload 上传指定的文件或者所有队列中的文件
uploadify多文件上传例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>uploadify 多文件上传例子</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify-3.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
.haha{
color:#FFFFFF;
}
#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>
</head>
<body>
<h1>Uploadify Demo</h1>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'debug' : false,
'auto' : true, //是否自动上传,
'buttonClass' : 'haha', //按钮辅助class
'buttonText' : '上传图片', //按钮文字
'height' : 30, //按钮高度
'width' : 100, //按钮宽度
'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false
'fileObjName' : 'files', //默认 Filedata, $_FILES控件名称
'fileSizeLimit' : '1024KB', //文件大小限制 0为无限制 默认KB
'fileTypeDesc' : 'All Files', //图片选择描述
'fileTypeExts' : '*.gif; *.jpg; *.png',//文件后缀限制 默认：'*.*'
'formData' : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式
// 'formData':{ 'albumid':$("#albumid").val() },
//'overrideEvents': ['onUploadProgress'], // The progress will not be updated
//'progressData' : 'speed', //默认percentage 进度显示方式
'queueID' : 'queue', //默认队列ID
'queueSizeLimit': 20, //一个队列上传文件数限制
'removeCompleted' : true, //完成时是否清除队列 默认true
'removeTimeout' : 3, //完成时清除队列显示秒数,默认3秒
'requeueErrors' : false, //队列上传出错，是否继续回滚队列
'successTimeout' : 5, //上传超时
'uploadLimit' : 99, //允许上传的最多张数
'swf' : 'uploadify.swf', //swfUpload
'uploader': 'uploadify.php', //服务器端脚本
//修改formData数据
'onUploadStart' : function(file) {
//$("#file_upload").uploadify("settings", "someOtherKey", 2);
},
//'onUploadStart' : function(file) { // $("#perpic").uploadify("settings","formData",{"albumid":$("#albumid").val()}); // },
//删除时触发
'onCancel' : function(file) {
//alert('The file ' + file.name + '--' + file.size + ' was cancelled.');
},
//清除队列
'onClearQueue' : function(queueItemCount) {
//alert(queueItemCount + ' file(s) were removed from the queue');
},
//调用destroy是触发
'onDestroy' : function() {
alert('我被销毁了');
},
//每次初始化一个队列是触发
'onInit' : function(instance){
//alert('The queue ID is ' + instance.settings.queueID);
},
//上传成功
'onUploadSuccess' : function(file, data, response) {
//alert(file.name + ' | ' + response + ':' + data);
},
//上传错误
'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.');
},
//上传完成
'onUploadComplete' : function(file) {
//alert('The file ' + file.name + ' finished processing.');
},
});
});
//变换按钮
function changeBtnText() {
$('#file_upload').uploadify('settings','buttonText','继续上传');
}
//返回按钮
function returnBtnText() {
alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
}
</script>
<h4>操作:</h4>
<a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a> |
<a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a> |
<a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a> |
<a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a> |
<a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a> |
<a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a> |
<a href="changeBtnText();"< /span>>变换按钮</a> |
<h4>大小:</h4>
<div id='progress'></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery上传插件uploadify参数详细分析
- JQuery批量上传插件Uploadify并传参数（二）新版本
- uploadify上传插件参数的一些设置
- query带进度上传插件Uploadify(ASP.NET版本)使用
- uploadify插件可选参数的详细介绍(
- uploadify插件可选参数的详细介绍
- uploadify插件可选参数的详细介绍(
- uploadify上传文件插件动态传参数到服务器
- 详细讲解jquery带进度上传插件Uploadify(ASP.NET版本)使用
- 强大的jquery上传插件SWF版Uploadify参数详解
- 详细讲解jquery带进度上传插件Uploadify(ASP.NET版本)使用
- PHP实现多图上传(结合uploadify插件)思路分析
- 文件上传插件Uploadify在Struts2中的应用，完整详细实例
- Uploadify插件批量上传图片使用方法分析
- jQuery上传插件Uploadify 3.2在.NET下的详细例子
- 文件上传插件Uploadify在Struts2中的应用，完整详细实例！
- uploadify插件可选参数的详细介绍
- jQuery上传插件Uploadify 3.2在.NET下的详细例子
- jQuery上传插件Uploadify 3.2在.NET下的详细例子
- uploadify插件可选参数的详细介绍