JQuery上传插件Uploadify使用详解
2012-04-07 16:33
666 查看
Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。
官方下载
官方文档
官方演示
首先按下面的步骤来实现一个简单的上传功能。
1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。
2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。
3 在项目中添加UploadFile文件夹，用来存放上传的文件。
进行完上面三步后项目的基本结构如下图:
4 Default.aspx的html页的代码修改如下：
5 UploadHandler类的ProcessRequest方法代码如下：
6 运行后效果如下图：
7 选择了两个文件后，点击上传，就可以看到UploadFile文件夹中会增加这两个文件。
上面简单地实现了一个上传的功能，依靠函数uploadify实现，uploadify函数的参数为json格式，可以对json对象的key值的修改来进行自定义的设置，如multi设置为true或false来控制是否可以进行多文件上传，下面就来介绍下这些key值的意思：
uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
script ： 后台处理程序的相对路径 。默认值：uploadify.php
checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method ： 提交方式Post 或Get 默认为Post
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
folder ： 上传文件存放的目录 。
queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ： 设置为true时可以上传多个文件。
auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，打开文件选择框效果如下图：
fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上传文件的大小限制 。
simUploadLimit ： 允许同时上传的个数 默认值：1 。
buttonText ： 浏览按钮的文本，默认值：BROWSE 。
buttonImg ： 浏览按钮的图片的路径 。
hideButton ： 设置为true则隐藏浏览按钮的图片 。
rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ： 设置浏览按钮的宽度 ，默认值：110。
height ： 设置浏览按钮的高度 ，默认值：30。
wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标，如下图：
上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。
onInit : 做一些初始化的工作。
onSelect ：选择文件时触发，该函数有三个参数
event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。
代码如下：
当选择一个文件后弹出的消息如下图：
onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：
fileCount：选择文件的总数。
filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
allBytesTotal：所有选择的文件的总大小。
onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。
fileCount：取消一个文件后，文件队列中剩余文件的个数。
allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。
onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。
onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。
onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。
type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
info：错误的描述
onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。
onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：
percentage：当前完成的百分比
bytesLoaded：当前上传的大小
allBytesLoaded：文件队列中已经上传完的大小
speed：上传速率 kb/s
onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed
fileCount：剩余没有上传完成的文件的个数。
speed：文件上传的平均速率 kb/s
注：fileObj对象和上面讲到的有些不太一样，onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。
onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：
filesUploaded :上传的所有文件个数。
errors ：出现错误的个数。
allBytesLoaded ：所有上传文件的总大小。
speed ：平均上传速率 kb/s
相关函数介绍
在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数，除此之外还有几个函数：
uploadifySettings：可以动态修改上面介绍的那些key值，如下面代码
如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中
uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中指定queueID的文件。
说明2：
Uploadify使用说明
译文：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插件。这就是我们今天看到的这个网站。
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在使用中遇到的问题。
示例代码
头文件引入
<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,以上文件就可以实现一个文件上传功能。
事件
1、onAllComplete：当队列中所有文件上传完成后触发。
示例
‘onAllComplete’:function(event,data){….}
event:事件对象(the event object)
data:包含上传文件的详细信息对象
2、onCancel:当队列中的每个文件别移除时触发
示例
‘onCancel’:function(event,ID,fileObj,data){…}
event:事件对象(the event object)
ID:被取消的文件的唯一标识
fileObj:选中文件的对象，他包含的属性列表如下
data：文件队列详细信息
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:选中文件的对象，他包含的属性列表如下
response:服务器端返回的Response文本
data：文件队列详细信息和文件上传的一般数据
6、onError：当单个文件上传出错时触发
示例：’onError’:function(event,ID,fileObj,errorObj){…}
event:事件对象(the event object)
fileObj:选中文件的对象，他包含的属性列表如下
errorObj:返回的错误信息对象
7、onInit: 当uploadify实例加载时触发
示例:’onInit’:function(){…}
8、onOpen:文件开始上传时触发
示例:’onOpen’:function(event,ID,fileObj){…}
event:事件对象(the event object)
ID:开始上传的文件在文件队列中的唯一表示
fileObj:选中文件的对象，他包含的属性列表如下
9、onProgress: 点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。
示例：’onProgress’:function(event,ID,fileObj,data){…}
event:事件对象(the event object)
ID:正在上传的文件在文件队列中的唯一表示
fileObj:选中文件的对象，他包含的属性列表如下
data:上传和队列的信息对象。
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:选中文件的对象，他包含的属性列表如下
12、onSelectOnce: 在单文件或多文件上传时，选择文件时触发。
示例:’onSelectOnce’:function(event,data){…}
event:事件对象(the event object)
data:选择的操作信息
13、onSWFReady:当flash文件加载时触发
示例:’onSWFReady’:function(){}
官方下载
官方文档
官方演示
首先按下面的步骤来实现一个简单的上传功能。
1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。
2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。
3 在项目中添加UploadFile文件夹，用来存放上传的文件。
进行完上面三步后项目的基本结构如下图:
4 Default.aspx的html页的代码修改如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Uploadify</title>
<link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
rel="stylesheet" type="text/css" />
<link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>
<script type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#uploadify").uploadify({
'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
'script': 'UploadHandler.ashx',
'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
'folder': 'UploadFile',
'queueID': 'fileQueue',
'auto': false,
'multi': true
});
});
</script>
</head>
<body>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
</p>
</body>
</html>5 UploadHandler类的ProcessRequest方法代码如下：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath =
HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(uploadPath + file.FileName);
//下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}6 运行后效果如下图：
7 选择了两个文件后，点击上传，就可以看到UploadFile文件夹中会增加这两个文件。
上面简单地实现了一个上传的功能，依靠函数uploadify实现，uploadify函数的参数为json格式，可以对json对象的key值的修改来进行自定义的设置，如multi设置为true或false来控制是否可以进行多文件上传，下面就来介绍下这些key值的意思：
uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
script ： 后台处理程序的相对路径 。默认值：uploadify.php
checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method ： 提交方式Post 或Get 默认为Post
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
folder ： 上传文件存放的目录 。
queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ： 设置为true时可以上传多个文件。
auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，打开文件选择框效果如下图：
fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上传文件的大小限制 。
simUploadLimit ： 允许同时上传的个数 默认值：1 。
buttonText ： 浏览按钮的文本，默认值：BROWSE 。
buttonImg ： 浏览按钮的图片的路径 。
hideButton ： 设置为true则隐藏浏览按钮的图片 。
rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ： 设置浏览按钮的宽度 ，默认值：110。
height ： 设置浏览按钮的高度 ，默认值：30。
wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标，如下图：
上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。
onInit : 做一些初始化的工作。
onSelect ：选择文件时触发，该函数有三个参数
event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。
代码如下：
$(document).ready(function()
{
$("#uploadify").uploadify({
'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
'script': 'UploadHandler.ashx',
'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
'folder': 'UploadFile',
'queueID': 'fileQueue',
'auto': false,
'multi': true,
'onInit':function(){alert("1");},
'onSelect': function(e, queueId, fileObj)
{
alert("唯一标识:" + queueId + "\r\n" +
"文件名：" + fileObj.name + "\r\n" +
"文件大小：" + fileObj.size + "\r\n" +
"创建时间：" + fileObj.creationDate + "\r\n" +
"最后修改时间：" + fileObj.modificationDate + "\r\n" +
"文件类型：" + fileObj.type
);
}
});
});当选择一个文件后弹出的消息如下图：
onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：
fileCount：选择文件的总数。
filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
allBytesTotal：所有选择的文件的总大小。
onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。
fileCount：取消一个文件后，文件队列中剩余文件的个数。
allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。
onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。
onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。
onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。
type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
info：错误的描述
onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。
onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：
percentage：当前完成的百分比
bytesLoaded：当前上传的大小
allBytesLoaded：文件队列中已经上传完的大小
speed：上传速率 kb/s
onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed
fileCount：剩余没有上传完成的文件的个数。
speed：文件上传的平均速率 kb/s
注：fileObj对象和上面讲到的有些不太一样，onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。
onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：
filesUploaded :上传的所有文件个数。
errors ：出现错误的个数。
allBytesLoaded ：所有上传文件的总大小。
speed ：平均上传速率 kb/s
相关函数介绍
在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数，除此之外还有几个函数：
uploadifySettings：可以动态修改上面介绍的那些key值，如下面代码
$('#uploadify').uploadifySettings('folder','JS');如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中
<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');$('#uploadify').uploadifyUpload()">上传</a>uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中指定queueID的文件。
$('#uploadify').uploadifyCancel(id);说明2：
Uploadify使用说明
Uploadify使用说明
什么是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) |
示例
‘onCancel’:function(event,ID,fileObj,data){…}
event:事件对象(the event object)
ID:被取消的文件的唯一标识
fileObj:选中文件的对象，他包含的属性列表如下
| FileOjb属性 | |
| name | 文件名 |
| size | 文件大小(byte) |
| creationDate | 文件的创建日期 |
| modifiedDate | 文件最后一次修改日期 |
| type | 文件的扩展名<包含’.’> |
| data属性 | |
| fileCount | 队列中剩余文件的数量 |
| allBytesTotal | 队列中剩余文件的大小(byte) |
示例：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 | 文件的扩展名<包含’.’> |
data：文件队列详细信息和文件上传的一般数据
| data属性 | |
| fileCount | 队列中剩余文件的数量 |
| Speed | 上传文件的平均速度(byte) |
示例：’onError’:function(event,ID,fileObj,errorObj){…}
event:事件对象(the event object)
fileObj:选中文件的对象，他包含的属性列表如下
| FileOjb属性 | |
| name | 文件名 |
| size | 文件大小(byte) |
| creationDate | 文件的创建日期 |
| modifiedDate | 文件最后一次修改日期 |
| type | 文件的扩展名<包含’.’> |
| errorObj属性 | |
| type | HTTP/IO/ Security 之一 |
| info | 描述返回错误类型的信息。 |
示例:’onInit’:function(){…}
8、onOpen:文件开始上传时触发
示例:’onOpen’:function(event,ID,fileObj){…}
event:事件对象(the event object)
ID:开始上传的文件在文件队列中的唯一表示
fileObj:选中文件的对象，他包含的属性列表如下
| FileOjb属性 | |
| name | 文件名 |
| size | 文件大小(byte) |
| creationDate | 文件的创建日期 |
| modifiedDate | 文件最后一次修改日期 |
| type | 文件的扩展名<包含’.’> |
示例：’onProgress’:function(event,ID,fileObj,data){…}
event:事件对象(the event object)
ID:正在上传的文件在文件队列中的唯一表示
fileObj:选中文件的对象，他包含的属性列表如下
| FileOjb属性 | |
| name | 文件名 |
| size | 文件大小(byte) |
| creationDate | 文件的创建日期 |
| modifiedDate | 文件最后一次修改日期 |
| type | 文件的扩展名<包含’.’> |
| data属性 | |
| percentage | 文件上传的百分比 |
| bytesLoaded | 已经上传的字节数 |
| allBytesLoaded | 整个队列中上传的字节数 |
| speed | 上传文件的平均速度(byte) |
示例:’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 | 文件的扩展名<包含’.’> |
示例:’onSelectOnce’:function(event,data){…}
event:事件对象(the event object)
data:选择的操作信息
| data属性 | |
| fileCount | 队列中的文件数量 |
| filesSelected | 选择文件操作中选中的文件数量 |
| filesReplaced | 队列中被替换的文件数量 |
| allBytesTotal | 整个队列中上传的字节数 |
示例:’onSWFReady’:function(){}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery上传插件Uploadify使用详解及错误处理
- jQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解及错误处理
- AspNet中使用JQuery上传插件Uploadify详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- jQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解及错误处理
- jQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解及错误处理
- JQuery上传插件Uploadify使用详解
- jQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解 (转)
- JQuery上传插件Uploadify使用详解
- JQuery上传插件Uploadify使用详解