jQuery上传插件Uploadify
程序员文章站
2022-07-15 09:12:10
...
$(document)
.ready(
function (){
$("#mobileFile").uploadify({
'swf' :'<%=request.getContextPath()%>/js/uploadify/uploadify.swf',
'uploader' :'<%=request.getContextPath()%>/send/taskImport.do',
'fileDataName':'file',
'method' :'get',
'buttonText':'选择文件',
'fileTypeExts' :'*.txt',
'fileTypeDesc' :'请选择txt文本文件',
'multi' :false,
'auto' :false,
//'dataType' :'json',
//'debug' :true,
'width' :100,
'height' :16,
'queueSizeLimit' :1,
'successTimeout' :120,
'onUploadStart':function(file){
clearHiddenValue();
is_select_black($("input[name='is_filter_black']"));
if(!src_form($("input[name='src_from']"))){
alert('请最少选择一种号码来源');
$("#mobileFile").uploadify('cancel');
}
if($("input[name='src_from']")[0].checked){
if(!src_form($("input[name='groupName']"))){
alert('请最少选择一个组');
$("#mobileFile").uploadify('cancel');
}else{
count($("input[name='groupName']"));
if($("#currentSmsCount").val()>$("#CountId").val()){
alert('选择组的下发条数大于本月剩余下发条数');
$("#mobileFile").uploadify('cancel');
return;
}
}
}
selectSrcForm($("input[name='src_from']"));
$("#mobileFile").uploadify('settings', 'formData', { 'isBlackFilter':$("#isBlackFilter").val(),
'src_form':$("#src_form").val(),
'groupId' :$("#groupId").val()
})
},
'onUploadSuccess' : function (file,data,response){
alert(data);
data=eval("("+data+")");
if(Math.abs(data[3])>Math.abs($("#CountId").val())){
$('#uploadMessage').html('<font color=red>此次上传有效的号码个数为'+data[3]+"条。超出了"+(Math.abs(data[3])-Math.abs($("#CountId").val()))+"条。将不上传请重新上传。</font>");
}else{
$('#selTxtAndgroup').attr("value","重新上传");
$('#mobileListFile').val(data[0]);
$('#blackListFile').val(data[1]);
$('#repeatListFile').val(data[2]);
$('#currentFileList').val(data[3]);
$('#uploadMessage').html('<font color=red>此次上传有效的号码个数为'+data[3]+"条。</font>");
}
},
'onUploadError' : function(file, errorCode, errorMsg) {
if(errorCode==-200){
alert('系统发生异常,请联系管理员');
}
}
})
}
)
什么是Uploadify
原文:Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.
译文:Uploadify是一个jQuery插件,集成了一个完全可定制的多个文件上传您的网站上的效用。它混淆应用的Javascript,ActionScript,和任何办事器端说话来动态创建的任何一个页面上的DOM元素的一个实例。
原文: Uploadify was born out of the need for a multiple file upload utility for a CMS that was being developed. After evaluating the other available options, RonnieSan decided the best option was to build a new plug-in and make it available to the development community. In order to make the plug-in easy to implement and highly-customizable, the jQuery format was chosen. After word got out, the popularity of the plug-in spawned the need for a dedicated site. Travis Nickels volunteered his help to refine the Uploadify plug-in and make it what it is today.
译文:CMS开辟后,须要实现多文件上传功能,如许,Uploadify这个实用对象出生了。经过评过其他可用选项,RonnieSan决意创建一个新的插件供给给开辟社区。为了使这个插件轻易实验,并可高度定制,最后选择了Jquery.消息传出后,这个插件的普及,使其须要一个专门的网站来供给支撑。Travis Nickels挺身而出的去帮助和完美Uploadify插件。这就是我们今天看到的这个网站。
Uplodify的特点
Features
特点
<!--[if !supportLists]-->· <!--[endif]-->jQuery Implementation
Jquery支撑
<!--[if !supportLists]-->· <!--[endif]-->Multiple File Upload Capabilities
多文件上传功能
<!--[if !supportLists]-->· <!--[endif]-->SWFObject Integration
SWFObject集成
<!--[if !supportLists]-->· <!--[endif]-->Compatibility with Popular Server-Side Languages
风行的办事器端说话功能
<!--[if !supportLists]-->· <!--[endif]-->Highly-Customizable
高定制性
<!--[if !supportLists]-->· <!--[endif]-->Large Support Community
强大的社区支撑
<!--[if !supportLists]-->· <!--[endif]-->Extensive Documentation with Examples
扩大文档和实例
怎么应用Uploadify
原文:Uploadify was created to be an easy-to-implement solution for multiple file uploads. As a jQuery plugin, the Uploadify implementation is simple and highly-customizable.
While it may require a foundational knowledge of jQuery to successfully implement, this documentation should provide a comprehensive enough reference for those who are having trouble. If you are running into issues that this documentation can""t help solve, there is an active community of Uploadify users that can be accessed through the forums. In addition, we""ve provided a list of FAQs that may also aid in troubleshooting your Uploadify instance
译文:
Uploadify是一个简单易用的多文件上传规划。作为一个Jquery插件,Uploadify应用简单,并具有高度的定制性。
正常应用Uploadify插件须要一些Jquery根蒂根基常识。为了削减应用题目,本文档供给了足够周全的参考常识。若是该文档不克不及解决你在应用中碰到的题目,请接见论坛(http://www.uploadify.com/forums/)获取更多信息。此外,我们供给了常见题目列表,也许这些信息也能帮助你解决Uploadify在应用中碰到的题目。
最低需求
jQuery 1.4.x or greater
Jquery1.4及更高版本
swfObject 2.2 or greater
SwfObject2.2及以上版本
Flash Player 9.0.24 or greater
Flash Player 9.0.24及以上版本
示例代码
头文件引入
<link href="uploadify/uploadify.css" type="text/css" rel="Stylesheet" rev="Stylesheet" />
<script type="text/javascript" language="javascript" src="uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="uploadify/swfobject.js"></script>
<script type="text/javascript" language="javascript" src="uploadify/jquery.uploadify.v2.1.4.min.js"></script>
应用Uploadify插件须要引入uploadify.css、jquery.js、swfobjects.js、和uploadify.js等4个文件
HTML文件
<input type="file" id="up_file" />
若是只是实现简单的文件上传功能,只须要在body里,添加一个file。
Js代码
<script type="text/javascript" language="javascript">
¥(document).ready(function () {
¥("#up_file").uploadify({
""uploader"": ""/uploadify/uploadify/uploadify.swf"",
""script"": ""/uploadify/UploadifyHandler.ashx"",
""cancelImg"": ""/uploadify/uploadify/cancel.png"",
""folder"": ""/upload"",
""auto"":true,
""multi"":true
});
});
</script>
Ok,以上文件就可以实现一个文件上传功能。
属性
名称
类型
描述
auto
boolean
文件添加到上传队列后,主动进行上传。默认为false
buttonImg
string
浏览按钮的图片路径
buttonText
string
浏览按钮上显示的文字(不支撑中文,然则可以设置有中文的图片)
cancelImg
string
文件上传队列中的作废按钮图片路径
checkScript
string
检测办事器上已经存在的文件的办事器端脚本路径
displayData
string
文件上传过程中,在该文件的队列条目显示的数据信息。默认是上传的百分比(percentage),你可以改为”speed”,显示文件上传的均匀速度。
expressInstall
string
expressInstall.swf 的文件路径,若是策画机不存在flash,则应用该选项初始化flash。
fileDataName
string
办事器端脚本应用的文件数组名称。默认为Filedata
fileDesc
string
<!--[if !supportLists]-->1. <!--[endif]-->该选项必须共同fileExt一路应用,他是文件类型选中显示的内容,例如:
<!--[if !supportLists]-->2. <!--[endif]-->""fileExt"" : ""*.jpg;*.gif;*.png"",
<!--[if !supportLists]-->3. <!--[endif]--> ""fileDesc"" : ""Web Image Files (.JPG, .GIF, .PNG)""
fileExt
string
容许上传的文件类型,应用分号(”;)”分别 例如:*.jpg;*.gif,默认为null(所有文件类型)
folder
string
上传的文件保存路径(文件夹目次)
height
integer
浏览按钮的高度
hideButton
boolean
隐蔽flash按钮,如许你就可以本身设置底层div元素的样式了
method
string
提交体式格式POST 和GET,默认是POST
multi
boolean
是否允很多文件上传。默认为false
queueID
string
页面上作为文件上传队列的元素的ID
queueSizeLimit
integer
容许上传的文件数量上限.默认是999
removeCompleted
boolean
文件上传完成后,是否主动移除队列中的文件。默认为true
rollover
boolean
若是设置为true,则鼠标移到浏览按钮上后,会有翻转结果
script
string
办事器端处理惩罚文件上传的脚本路径
scriptAccess
string
flash脚本文件的接见模式,若是在本地测试设置为always.容许的选项: ""sameDomain"" / ""always"",默认是sameDomain.
scriptData
JSON object with mixed types
在文件上传的过程中,scriptData选项容许发送额外的数据到办事器端脚本,你能像正常应用提交体式格式获取值(request.Form[“scriptData variable”])。同时,连络.uploadifySettings()办法,可以发送动态数据。
例如: ""scriptData"" : {""firstName"":""Ronnie"",""age"":30}
simUploadLimit
integer
同时上传文件的数量。默认为1
sizeLimit
integer
容许上传的文件大小(kb), 例如: ""sizeLimit"" : 102400
uploader
string
Uploadify.swf文件路径
width
string
浏览按钮的宽度
wmode
String
设置该项为transparent 可以使浏览按钮的flash靠山文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque
事务
onAllComplete
function
当队列中所有文件上传完成后触发。
function(event,data)
onCancel
function
当队列中的每个文件别移除时触发
onCheck
function
上传开端前,若是发明有同名的文件存在则触发该事务。
onClearQueue
function
当uploadifyClearQueue()办法调用时触发
onComplete
function
当单个文件上传完成后触发
onError
function
当单个文件上传失足时触发
onInit
function
当uploadify实例加载时触发
事务
1、onAllComplete:当队列中所有文件上传完成后触发。
示例
‘onAllComplete’:function(event,data){….}
event:事务对象(the event object)
data:包含上传文件的具体信息对象
Data数据对象
filesUploaded
上传了的文件的数量
errors
碰到的错误总数
allBytesLoaded
上传的总字节数
speed
均匀上传速度(kb/s)
2、onCancel:当队列中的每个文件别移除时触发
示例
‘onCancel’:function(event,ID,fileObj,data){…}
event:事务对象(the event object)
ID:被作废的文件的独一标识
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
data:文件队列具体信息
data属性
fileCount
队列中残剩文件的数量
allBytesTotal
队列中残剩文件的大小(byte)
3、onCheck: 上传开端前,若是发明有同名的文件存在则触发该事务。
示例:function(event,data,key){。。。。}
event:事务对象(the event object)
data:包含办事器段所有文件名称的一个列表。每个文件的关键字是队列中的独一标识。
key:用户办事器段检测的独一标识
4、onClearQueue: 当uploadifyClearQueue()办法调用时触发
示例:’onClearQueue’:function(event){….}
event:事务对象(the event object)
5、onComplete:当单个文件上传完成后触发
示例:’onComplete’:function(event,ID,fileObj,response,data){….}
event:事务对象(the event object)
ID:该文件在文件队列中的独一默示
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
filePath
上传办事器后的文件路径
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
response:办事器端返回的Response文本
data:文件队列具体信息和文件上传的一般数据
data属性
fileCount
队列中残剩文件的数量
Speed
上传文件的均匀速度(byte)
6、onError:当单个文件上传失足时触发
示例:’onError’:function(event,ID,fileObj,errorObj){…}
event:事务对象(the event object)
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
errorObj:返回的错误信息对象
errorObj属性
type
HTTP/IO/ Security 之一
info
描述返回错误类型的信息。
7、onInit: 当uploadify实例加载时触发
示例:’onInit’:function(){…}
8、onOpen:文件开端上传时触发
示例:’onOpen’:function(event,ID,fileObj){…}
event:事务对象(the event object)
ID:开端上传的文件在文件队列中的独一默示
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
9、onProgress: 点击上传时触发,若是auto设置为true则是选择文件时触发,若是有多个文件上传则遍历全部文件队列,在onOpen之后触发。
示例:’onProgress’:function(event,ID,fileObj,data){…}
event:事务对象(the event object)
ID:正在上传的文件在文件队列中的独一默示
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
data:上传和队列的信息对象。
data属性
percentage
文件上传的百分比
bytesLoaded
已经上传的字节数
allBytesLoaded
全部队列中上传的字节数
speed
上传文件的均匀速度(byte)
10、onQueueFull: 当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发
示例:’onQueueFull’:function(event,queueSizeLimit){}
event:事务对象(the event object)
queueSizeLimit:上传文件的最大数。queueSizeLimit属性值。
11、onSelect: 选择文件时触发,
示例:’onSelect’:function(event,ID,fileObj){…}
event:事务对象(the event object)
ID:选中文件的独一标识
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
12、onSelectOnce: 在单文件或多文件上传时,选择文件时触发。
示例:’onSelectOnce’:function(event,data){…}
event:事务对象(the event object)
data:选择的操纵信息
data属性
fileCount
队列中的文件数量
filesSelected
选择文件操纵中选中的文件数量
filesReplaced
队列中被调换的文件数量
allBytesTotal
全部队列中上传的字节数
13、onSWFReady:当flash文件加载时触发
示例:’onSWFReady’:function(){}
办法
<!--[if !supportLists]-->· <!--[endif]-->uploadify() 创建一个uploadify实例。
<!--[if !supportLists]-->· <!--[endif]-->uploadifyCancel() 从队列中移除一个文件。若是文件正在上传,则停止上传,并在队列中移除该文件。uploadifyCancel(¥(“. uploadifyQueueItem”).first().attr(“id”).replace(“页面上的file的ID”,””));
<!--[if !supportLists]-->· <!--[endif]-->uploadifyClearQueue():作废文件上传,并移除队列中的所有文件。
<!--[if !supportLists]-->· <!--[endif]-->uploadifySettings():更改uploadify初始化时的选项uploadifySettings(‘buttonText’,’Browse’)
<!--[if !supportLists]-->· <!--[endif]-->uploadifyUpload()上传文件:uploadifyUpload(¥(“. uploadifyQueueItem”).first().attr(“id”).replace(“页面上的file的ID”,’’));
备注:因为官方给出的文件上传用的是PHP说话文件。所以本身写了一个.net的
附录
<!--[if !supportLists]-->· <!--[endif]-->Uploadify的官方网站: http://www.uploadify.com/
<!--[if !supportLists]-->· <!--[endif]-->Uploadify的下载页面: http://www.uploadify.com/download/
<!--[if !supportLists]-->· <!--[endif]-->Uploadify-V2.1.4 :http://www.uploadify.com/wp-content/uploads/uploadify-v2.1.4.zip
<!--[if !supportLists]-->· <!--[endif]-->帮助文档: http://www.uploadify.com/documentation/
<!--[if !supportLists]-->· <!--[endif]-->常见题目: http://www.uploadify.com/faqs/
<!--[if !supportLists]-->· <!--[endif]-->Demo下载地址: http://dl.dbank.com/c08qsci31i
.ready(
function (){
$("#mobileFile").uploadify({
'swf' :'<%=request.getContextPath()%>/js/uploadify/uploadify.swf',
'uploader' :'<%=request.getContextPath()%>/send/taskImport.do',
'fileDataName':'file',
'method' :'get',
'buttonText':'选择文件',
'fileTypeExts' :'*.txt',
'fileTypeDesc' :'请选择txt文本文件',
'multi' :false,
'auto' :false,
//'dataType' :'json',
//'debug' :true,
'width' :100,
'height' :16,
'queueSizeLimit' :1,
'successTimeout' :120,
'onUploadStart':function(file){
clearHiddenValue();
is_select_black($("input[name='is_filter_black']"));
if(!src_form($("input[name='src_from']"))){
alert('请最少选择一种号码来源');
$("#mobileFile").uploadify('cancel');
}
if($("input[name='src_from']")[0].checked){
if(!src_form($("input[name='groupName']"))){
alert('请最少选择一个组');
$("#mobileFile").uploadify('cancel');
}else{
count($("input[name='groupName']"));
if($("#currentSmsCount").val()>$("#CountId").val()){
alert('选择组的下发条数大于本月剩余下发条数');
$("#mobileFile").uploadify('cancel');
return;
}
}
}
selectSrcForm($("input[name='src_from']"));
$("#mobileFile").uploadify('settings', 'formData', { 'isBlackFilter':$("#isBlackFilter").val(),
'src_form':$("#src_form").val(),
'groupId' :$("#groupId").val()
})
},
'onUploadSuccess' : function (file,data,response){
alert(data);
data=eval("("+data+")");
if(Math.abs(data[3])>Math.abs($("#CountId").val())){
$('#uploadMessage').html('<font color=red>此次上传有效的号码个数为'+data[3]+"条。超出了"+(Math.abs(data[3])-Math.abs($("#CountId").val()))+"条。将不上传请重新上传。</font>");
}else{
$('#selTxtAndgroup').attr("value","重新上传");
$('#mobileListFile').val(data[0]);
$('#blackListFile').val(data[1]);
$('#repeatListFile').val(data[2]);
$('#currentFileList').val(data[3]);
$('#uploadMessage').html('<font color=red>此次上传有效的号码个数为'+data[3]+"条。</font>");
}
},
'onUploadError' : function(file, errorCode, errorMsg) {
if(errorCode==-200){
alert('系统发生异常,请联系管理员');
}
}
})
}
)
什么是Uploadify
原文:Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.
译文:Uploadify是一个jQuery插件,集成了一个完全可定制的多个文件上传您的网站上的效用。它混淆应用的Javascript,ActionScript,和任何办事器端说话来动态创建的任何一个页面上的DOM元素的一个实例。
原文: Uploadify was born out of the need for a multiple file upload utility for a CMS that was being developed. After evaluating the other available options, RonnieSan decided the best option was to build a new plug-in and make it available to the development community. In order to make the plug-in easy to implement and highly-customizable, the jQuery format was chosen. After word got out, the popularity of the plug-in spawned the need for a dedicated site. Travis Nickels volunteered his help to refine the Uploadify plug-in and make it what it is today.
译文:CMS开辟后,须要实现多文件上传功能,如许,Uploadify这个实用对象出生了。经过评过其他可用选项,RonnieSan决意创建一个新的插件供给给开辟社区。为了使这个插件轻易实验,并可高度定制,最后选择了Jquery.消息传出后,这个插件的普及,使其须要一个专门的网站来供给支撑。Travis Nickels挺身而出的去帮助和完美Uploadify插件。这就是我们今天看到的这个网站。
Uplodify的特点
Features
特点
<!--[if !supportLists]-->· <!--[endif]-->jQuery Implementation
Jquery支撑
<!--[if !supportLists]-->· <!--[endif]-->Multiple File Upload Capabilities
多文件上传功能
<!--[if !supportLists]-->· <!--[endif]-->SWFObject Integration
SWFObject集成
<!--[if !supportLists]-->· <!--[endif]-->Compatibility with Popular Server-Side Languages
风行的办事器端说话功能
<!--[if !supportLists]-->· <!--[endif]-->Highly-Customizable
高定制性
<!--[if !supportLists]-->· <!--[endif]-->Large Support Community
强大的社区支撑
<!--[if !supportLists]-->· <!--[endif]-->Extensive Documentation with Examples
扩大文档和实例
怎么应用Uploadify
原文:Uploadify was created to be an easy-to-implement solution for multiple file uploads. As a jQuery plugin, the Uploadify implementation is simple and highly-customizable.
While it may require a foundational knowledge of jQuery to successfully implement, this documentation should provide a comprehensive enough reference for those who are having trouble. If you are running into issues that this documentation can""t help solve, there is an active community of Uploadify users that can be accessed through the forums. In addition, we""ve provided a list of FAQs that may also aid in troubleshooting your Uploadify instance
译文:
Uploadify是一个简单易用的多文件上传规划。作为一个Jquery插件,Uploadify应用简单,并具有高度的定制性。
正常应用Uploadify插件须要一些Jquery根蒂根基常识。为了削减应用题目,本文档供给了足够周全的参考常识。若是该文档不克不及解决你在应用中碰到的题目,请接见论坛(http://www.uploadify.com/forums/)获取更多信息。此外,我们供给了常见题目列表,也许这些信息也能帮助你解决Uploadify在应用中碰到的题目。
最低需求
jQuery 1.4.x or greater
Jquery1.4及更高版本
swfObject 2.2 or greater
SwfObject2.2及以上版本
Flash Player 9.0.24 or greater
Flash Player 9.0.24及以上版本
示例代码
头文件引入
<link href="uploadify/uploadify.css" type="text/css" rel="Stylesheet" rev="Stylesheet" />
<script type="text/javascript" language="javascript" src="uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="uploadify/swfobject.js"></script>
<script type="text/javascript" language="javascript" src="uploadify/jquery.uploadify.v2.1.4.min.js"></script>
应用Uploadify插件须要引入uploadify.css、jquery.js、swfobjects.js、和uploadify.js等4个文件
HTML文件
<input type="file" id="up_file" />
若是只是实现简单的文件上传功能,只须要在body里,添加一个file。
Js代码
<script type="text/javascript" language="javascript">
¥(document).ready(function () {
¥("#up_file").uploadify({
""uploader"": ""/uploadify/uploadify/uploadify.swf"",
""script"": ""/uploadify/UploadifyHandler.ashx"",
""cancelImg"": ""/uploadify/uploadify/cancel.png"",
""folder"": ""/upload"",
""auto"":true,
""multi"":true
});
});
</script>
Ok,以上文件就可以实现一个文件上传功能。
属性
名称
类型
描述
auto
boolean
文件添加到上传队列后,主动进行上传。默认为false
buttonImg
string
浏览按钮的图片路径
buttonText
string
浏览按钮上显示的文字(不支撑中文,然则可以设置有中文的图片)
cancelImg
string
文件上传队列中的作废按钮图片路径
checkScript
string
检测办事器上已经存在的文件的办事器端脚本路径
displayData
string
文件上传过程中,在该文件的队列条目显示的数据信息。默认是上传的百分比(percentage),你可以改为”speed”,显示文件上传的均匀速度。
expressInstall
string
expressInstall.swf 的文件路径,若是策画机不存在flash,则应用该选项初始化flash。
fileDataName
string
办事器端脚本应用的文件数组名称。默认为Filedata
fileDesc
string
<!--[if !supportLists]-->1. <!--[endif]-->该选项必须共同fileExt一路应用,他是文件类型选中显示的内容,例如:
<!--[if !supportLists]-->2. <!--[endif]-->""fileExt"" : ""*.jpg;*.gif;*.png"",
<!--[if !supportLists]-->3. <!--[endif]--> ""fileDesc"" : ""Web Image Files (.JPG, .GIF, .PNG)""
fileExt
string
容许上传的文件类型,应用分号(”;)”分别 例如:*.jpg;*.gif,默认为null(所有文件类型)
folder
string
上传的文件保存路径(文件夹目次)
height
integer
浏览按钮的高度
hideButton
boolean
隐蔽flash按钮,如许你就可以本身设置底层div元素的样式了
method
string
提交体式格式POST 和GET,默认是POST
multi
boolean
是否允很多文件上传。默认为false
queueID
string
页面上作为文件上传队列的元素的ID
queueSizeLimit
integer
容许上传的文件数量上限.默认是999
removeCompleted
boolean
文件上传完成后,是否主动移除队列中的文件。默认为true
rollover
boolean
若是设置为true,则鼠标移到浏览按钮上后,会有翻转结果
script
string
办事器端处理惩罚文件上传的脚本路径
scriptAccess
string
flash脚本文件的接见模式,若是在本地测试设置为always.容许的选项: ""sameDomain"" / ""always"",默认是sameDomain.
scriptData
JSON object with mixed types
在文件上传的过程中,scriptData选项容许发送额外的数据到办事器端脚本,你能像正常应用提交体式格式获取值(request.Form[“scriptData variable”])。同时,连络.uploadifySettings()办法,可以发送动态数据。
例如: ""scriptData"" : {""firstName"":""Ronnie"",""age"":30}
simUploadLimit
integer
同时上传文件的数量。默认为1
sizeLimit
integer
容许上传的文件大小(kb), 例如: ""sizeLimit"" : 102400
uploader
string
Uploadify.swf文件路径
width
string
浏览按钮的宽度
wmode
String
设置该项为transparent 可以使浏览按钮的flash靠山文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque
事务
onAllComplete
function
当队列中所有文件上传完成后触发。
function(event,data)
onCancel
function
当队列中的每个文件别移除时触发
onCheck
function
上传开端前,若是发明有同名的文件存在则触发该事务。
onClearQueue
function
当uploadifyClearQueue()办法调用时触发
onComplete
function
当单个文件上传完成后触发
onError
function
当单个文件上传失足时触发
onInit
function
当uploadify实例加载时触发
事务
1、onAllComplete:当队列中所有文件上传完成后触发。
示例
‘onAllComplete’:function(event,data){….}
event:事务对象(the event object)
data:包含上传文件的具体信息对象
Data数据对象
filesUploaded
上传了的文件的数量
errors
碰到的错误总数
allBytesLoaded
上传的总字节数
speed
均匀上传速度(kb/s)
2、onCancel:当队列中的每个文件别移除时触发
示例
‘onCancel’:function(event,ID,fileObj,data){…}
event:事务对象(the event object)
ID:被作废的文件的独一标识
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
data:文件队列具体信息
data属性
fileCount
队列中残剩文件的数量
allBytesTotal
队列中残剩文件的大小(byte)
3、onCheck: 上传开端前,若是发明有同名的文件存在则触发该事务。
示例:function(event,data,key){。。。。}
event:事务对象(the event object)
data:包含办事器段所有文件名称的一个列表。每个文件的关键字是队列中的独一标识。
key:用户办事器段检测的独一标识
4、onClearQueue: 当uploadifyClearQueue()办法调用时触发
示例:’onClearQueue’:function(event){….}
event:事务对象(the event object)
5、onComplete:当单个文件上传完成后触发
示例:’onComplete’:function(event,ID,fileObj,response,data){….}
event:事务对象(the event object)
ID:该文件在文件队列中的独一默示
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
filePath
上传办事器后的文件路径
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
response:办事器端返回的Response文本
data:文件队列具体信息和文件上传的一般数据
data属性
fileCount
队列中残剩文件的数量
Speed
上传文件的均匀速度(byte)
6、onError:当单个文件上传失足时触发
示例:’onError’:function(event,ID,fileObj,errorObj){…}
event:事务对象(the event object)
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
errorObj:返回的错误信息对象
errorObj属性
type
HTTP/IO/ Security 之一
info
描述返回错误类型的信息。
7、onInit: 当uploadify实例加载时触发
示例:’onInit’:function(){…}
8、onOpen:文件开端上传时触发
示例:’onOpen’:function(event,ID,fileObj){…}
event:事务对象(the event object)
ID:开端上传的文件在文件队列中的独一默示
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
9、onProgress: 点击上传时触发,若是auto设置为true则是选择文件时触发,若是有多个文件上传则遍历全部文件队列,在onOpen之后触发。
示例:’onProgress’:function(event,ID,fileObj,data){…}
event:事务对象(the event object)
ID:正在上传的文件在文件队列中的独一默示
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
data:上传和队列的信息对象。
data属性
percentage
文件上传的百分比
bytesLoaded
已经上传的字节数
allBytesLoaded
全部队列中上传的字节数
speed
上传文件的均匀速度(byte)
10、onQueueFull: 当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发
示例:’onQueueFull’:function(event,queueSizeLimit){}
event:事务对象(the event object)
queueSizeLimit:上传文件的最大数。queueSizeLimit属性值。
11、onSelect: 选择文件时触发,
示例:’onSelect’:function(event,ID,fileObj){…}
event:事务对象(the event object)
ID:选中文件的独一标识
fileObj:选中文件的对象,他包含的属性列表如下
FileOjb属性
name
文件名
size
文件大小(byte)
creationDate
文件的创建日期
modifiedDate
文件最后一次批改日期
type
文件的扩大名<包含’.’>
12、onSelectOnce: 在单文件或多文件上传时,选择文件时触发。
示例:’onSelectOnce’:function(event,data){…}
event:事务对象(the event object)
data:选择的操纵信息
data属性
fileCount
队列中的文件数量
filesSelected
选择文件操纵中选中的文件数量
filesReplaced
队列中被调换的文件数量
allBytesTotal
全部队列中上传的字节数
13、onSWFReady:当flash文件加载时触发
示例:’onSWFReady’:function(){}
办法
<!--[if !supportLists]-->· <!--[endif]-->uploadify() 创建一个uploadify实例。
<!--[if !supportLists]-->· <!--[endif]-->uploadifyCancel() 从队列中移除一个文件。若是文件正在上传,则停止上传,并在队列中移除该文件。uploadifyCancel(¥(“. uploadifyQueueItem”).first().attr(“id”).replace(“页面上的file的ID”,””));
<!--[if !supportLists]-->· <!--[endif]-->uploadifyClearQueue():作废文件上传,并移除队列中的所有文件。
<!--[if !supportLists]-->· <!--[endif]-->uploadifySettings():更改uploadify初始化时的选项uploadifySettings(‘buttonText’,’Browse’)
<!--[if !supportLists]-->· <!--[endif]-->uploadifyUpload()上传文件:uploadifyUpload(¥(“. uploadifyQueueItem”).first().attr(“id”).replace(“页面上的file的ID”,’’));
备注:因为官方给出的文件上传用的是PHP说话文件。所以本身写了一个.net的
附录
<!--[if !supportLists]-->· <!--[endif]-->Uploadify的官方网站: http://www.uploadify.com/
<!--[if !supportLists]-->· <!--[endif]-->Uploadify的下载页面: http://www.uploadify.com/download/
<!--[if !supportLists]-->· <!--[endif]-->Uploadify-V2.1.4 :http://www.uploadify.com/wp-content/uploads/uploadify-v2.1.4.zip
<!--[if !supportLists]-->· <!--[endif]-->帮助文档: http://www.uploadify.com/documentation/
<!--[if !supportLists]-->· <!--[endif]-->常见题目: http://www.uploadify.com/faqs/
<!--[if !supportLists]-->· <!--[endif]-->Demo下载地址: http://dl.dbank.com/c08qsci31i
下一篇: jquery学习(0)