Uploadify使用说明
来源:互联网 发布:淘宝客服不在分流组 编辑:程序博客网 时间:2024/06/04 19:38
什么是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
- Uploadify使用说明
- uploadify 3.0 详细使用说明
- uploadify 3.0 详细使用说明
- uploadify 3.0 详细使用说明
- 上传文件插件 Uploadify使用说明
- 上传文件插件 Uploadify使用说明
- Jquery上传插件 uploadify v3.1使用说明
- uploadify多图片上传详细使用说明
- uploadify多图片上传详细使用说明
- jquery.uploadify上传插件HTML5版中文api使用说明
- Uploadify
- uploadify
- Uploadify
- uploadify
- Uploadify
- uploadify
- 使用说明
- 使用说明
- C++编程总结
- mysql校对规则
- navTab链接扩展
- 欢迎使用CSDN-markdown编辑器
- C++操作Redis的简单例子
- Uploadify使用说明
- Java图像处理方面的工具库和开发包
- OpenGL ES 2.0 实战问题 - yuv渲染成功,但是成果微微泛暗绿
- 控制反转(Inversion of Control)
- 全国首套完整ArcGIS Engine视频课程-地址
- 上海房价
- Java中将请求数据存入本地缓存
- PHP面试基础题之一
- Android客户端连接服务器端,向服务器端发送请求HttpURLConnection