Ajax+Flash多文件上传之FancyUpload
官方网站：http://digitarald.de/project/fancyupload/
一、 简单说明
Ajax+Flash多文件上传是一个开源的上传组件，名称是FancyUpload，其官方网址是：http://digitarald.de/project/fancyupload/。这个组件仅仅是客户端的应用组件，即与任何服务器端的技术没有关系，服务器端可以采用任何后台技术（如JSP、Servlet、ASP等）。应用该组件提供给我们的最大的好处有如下几点（个人认为，呵呵）：
可以同时选择多个文件进行上传；
以队列的形式排列要上传的文件和其相关信息（如名称、大小等）（美观^_^）；
可以设置要上传的文件个数、文件类型和文件大小（实用^_^）；
有上传进度显示（感觉这个非常直观，很方便实用）；
上传的过程中可以随时取消要上传的文件；
平台独立性，由于使用flash和成熟的AJAX框架（mootools）可以避免对特定浏览器和服务器依赖！
使用简单，文件体积小！（这个才是最实在的，呵呵）
表单无须设置enctype="multipart/form-data"了（这个有点意思吧）
二、 应用部署
文件夹fancyupload中的文件就是该组件所需要到的所有文件了，包括四个JS、二个图片、一个swf文件，另外还包含一个简单的测试html页面
将整个文件夹copy到你的web应用目录即可，使用的时候其步骤和代码如下：
引入JS文件
在页面上依次引入mootools-release-1.11.js、Swiff.Base.js、Swiff.Uploader.js、FancyUpload.js这四个JS，具体目录请依据自己的情况进行设置！
在页面上设置CSS样式（主要是文件列表和上传进度的样式）
在head之间嵌入mytest.html中的css代码！
在onload方法中调用如下代码：
var upload = new FancyUpload(
$(“fileId”),
{
swf: 'Swiff.Uploader.swf'
}
);
我们只要这一行代码就可以工作了，不过我们可以通过像设置swf一样来设置多个参数来控制我们的上传，比如是否使用队列，控制文件大小等。相关的参数意义如下：
fileId 就是我们页面上文件域的ID，即type为file的input元素的ID；
{} 这样包起来的参数就是我们的可选参数了，可参考FancyUpload.js中的说明。
在页面上设置类似mytest.html中的body区域的代码即可！
三、 FancyUpload的参数说明
url
文件上传的地址，如果不指定，那么将会自动取文件域所在的表单的action值来进行上传。如果表单的action也没有指定值，那么将尝试获取路径栏中的地址来进行文件上传。一般而言我们都需要指定该参数和文件域所在的表单的action两者之一！
swf
就是组件中的flash文件了，主要是用来选择文件和过滤等，基本上可以不用设置。
multiple
是否允许选择多个文件，默认是true。这个多选是指在打开的文件对话框中按住ctr键进行多文件的选中。
queued
是否允许队列上传，默认是true。
types
指定上传文件的类型，采用的格式是 {提示信息:文件类型}，如只允许媒体文件上传的例子：{“媒体文件(*.rm,*.avi)” : “*.rm; *.avi”}
limitSize
指定限制的文件大小，单位是字节！默认是不限制，超过此值的文件将不被选中，注意即使选择后系统也没有提示，但是队列中也是没有该文件的！可以通过修改文件FancyUpload.js，在其128行的if语句中加上一个alert提示即可！
limitFiles
限制的文件个数，默认是不限制！
createReplacement
一个自定义函数（参数为文件域对象），用来替换文件域，默认是被替换成为一个按钮！具体的代码可以参考FancyUpload.js中的第101到111行的代码。默认我已经将其按钮的值改成了中文的“浏览文件”。
instantStart
表示选择文件后是否立即开始上传，默认是false！也建议不要设置为true，上传的操作我们可以交给该文件域所在表单的提交按钮，这也是自动绑定的，无须我们做任何操作。
allowDuplicates
是否允许队列中选择重复的文件，默认是false！注释中是true，而代码中是false，所以以代码中的为准。
container
flash文件的容器对象，默认是document.body，可以不用修改！
optionFxDuration
文件添加到队列后，其高亮度到消失高亮度的时间，默认是250ms！也就是渐逝的时间长度。
queueList
来列表显示文件队列的容器对象或其ID。
onComplete
单个文件上传成功后调用的方法，非AJAX，无回调参数。每个文件上传成功后都将调用该方法一次！
onAllComplete
所有文件上传成功后的调用方法！
四、 表单文件域和参数同时上传实战
在你自己试过这个上传组件后，是不是感觉非常好用的，但同时你也或许发现了一个问题，那就是表单中的参数怎么进行上传的问题。因为该组件是采用FLASH+AJAX进行上传的，即页面是不刷新的，而且上传的过程中仅仅是上传了你选择的文件，而所有的表单非文件域参数则被忽略了。那我们如何来进行文件和参数的同步上传呢，这里有几个问题要注意的就是：
1） 由于该组件是绑定了表单的submit方法，所以不能够直接在js中使用$(‘表单ID’).submit()这样的方式来进行表单上传，否则参数是传上去了而文件则没有；
2） 如果没有做设置那么只要选择了文件而且触发了表单的submit事件，那么该组件就会开始上传文件，即使我们加了onsubmit方法中的return false也无效；
3） 在第二条的基础上我们如何保证用户既选择了文件而且又输入了表单的所有必填参数呢？
这些问题在经过本人一天的实际摸索后，终于得到了解决，呵呵，现说明如下：
1） 首先是上传前的参数检查
这包括表单中的必填参数和文件的选择与否的判断。既然我们无法通过直接点击submit按钮进行提交前检查，那么我们就用一个普通的按钮，设置一个onclick事件，通过这个事件来进行参数的检查。这个即可避免选择了文件但又没有输入参数的误提交，又检查了整个数据的完整性，其代码如下：
<input type=”button” value=”提交” onclikc=”checkSubmit()” />
在checkSubmit方法中我们可以通过调用对象FancyUpload的fileList属性来判断用户是否选择了文件，其代码如下（假设你的FancyUpload对象的实例名称是uploader）：
if (uploader. fileList.length < 1) {
alert(‘请选择要上传的文件！’);
}
通过判断这个属性（类型为数组）的长度来查看用户是否选择了文件，具体的个数就需要用户自己进行判断了，我这里是一个文件。
2） 表单提交
参数检查完整后我们就可以开始上传文件和表单参数了，这里我们的文件和表单参数是无法一起提交的，我们只能分先文件上传，上传成功后再提交我们的表单参数。
第一步是文件的上传，之前也已经提过了不能够直接在JS中进行表单的submit，否则就无法上传文件了，这里我们采用一个迂回的办法，在表单中隐藏一个提交按钮，代码如下：
<input type=”submit” id=”mysubmit” style=”display:none” />
然后我们再在checkSubmit函数的最后加上如下代码：
……
$(“mysubmit”).submit();
……
这样，我们通过一个隐藏提交按钮来触发表单的submit事件，这样我们就可以顺利的进行文件上传了。
第二步，在文件上传成功后，我们再进行参数的提交，文件上传成功的触发函数我们在FancyUpload对象的onComplete上进行定义，不过对于多文件上传的就要定义在onAllComplete上了，我建议全部定义在onAllComplete上，如下：
onAllComplete:function() {
$(“你的表单的Id”).submit();
}
在这里我们就可以直接调用表单的submit来提交参数了，当然了你也可以采用AJAX提交，那就要看自己的需求了。
3） 上传文件的路径和表单参数的绑定
由于我们的文件上传和表单参数上传是分成两个部分进行上传的，这就出现了如何将两次上传的参数进行绑定的问题。而且查看官方上的评论，作者也没有给出解决方法，而且该组件只能检测错误时的状态码（00 < status < 300），对于上传成功是无法获取任何返回信息的。目前我的解决方法就是：
1. 文件上传成功后将路径信息存储以原始文件名为key存储在session中；
2. 参数进行上传时根据原始文件的名称去从session中获取上传的路径信息
通过这二步基本上就可以绑定两次上传的参数了！如果有更好的方法大家也可以一起探讨。
所以通过以上三个步骤后我们就可以实现文件的无刷新上传和进度显示了！^_^另外这个分步进行上传是相对表单参数比较多的情况，如果参数比较少的话可以直接将参数附加在URL地址后面进行也是可以的，这就要靠个人的发挥了。
客户端文件多选上传工具SWFUpload
官方网站：http://www.swfupload.org/
什么是SWFUpload？
SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。
SWFUpload的主要特点
* 可以同时上传多个文件；
* 类似AJAX的无刷新上传；
* 可以显示上传进度；
* 良好的浏览器兼容性；
* 兼容其他JavaScript库 (例如：jQuery, Prototype等)；
* 支持Flash 8和Flash 9；
SWFUpload不同于其他基于Flash构建的上传工具，它有着优雅的代码设计，开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观；它还提供了一组简明的JavaScript事件，借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。
在使用SWFUpload之前，请确认你具备一定的JavaScript和DOM知识。在实际开发中，大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。
效果演示
* Classic Form Demo http://demo.swfupload.org/formsdemo ;
* Multi-Instance Demo http://demo.swfupload.org/multiuploaddemo ;
* Features Demo http://demo.swfupload.org/featuresdemo ;
* Application Demo http://demo.swfupload.org/applicationdemo ;
* v1.0.2 Plugin Demo http://demo.swfupload.org/v102demo ;
选择合适的Flash控件
在发行包（SWFUpload v2）中含有2个版本的Flash控件（swfupload_f8.swf 与wfupload_f9.swf），其中第一个版本拥有最佳的兼容性，但是为此损失了部分功能；而第二个版本提供了一些附加的功能但是损失了兼容性。
SWFUpload的初始化与配置
首先，在页面中引用SWFUpload.js ，如
<script type="text/javascript" src="http://www.swfupload.org/swfupload.js"></script>
然后，初始化SWFUpload ，如
var swfu;
window.onload = function () {
swfu = new SWFUpload({
upload_url : "http://www.swfupload.org/upload.php",
flash_url : "http://www.swfupload.org/swfupload_f9.swf", file_size_limit : "20480"
});
};
以下是一个标准的SWFUpload初始化设置所需的参数，你可以根据需要自己进行删减：
{
upload_url : "http://www.swfupload.org/upload.php", 处理上传请求的服务器端脚本URL
file_post_name : "Filedata", 是POST过去的$_FILES的数组名
post_params : {
"post_param_name_1" : "post_param_value_1",
"post_param_name_2" : "post_param_value_2",
"post_param_name_n" : "post_param_value_n"
},
file_types : "*.jpg;*.gif", 允许上传的文件类型
file_types_description: "Web Image Files", 文件类型描述
file_size_limit : "1024", 上传文件体积上限，单位MB
file_upload_limit : 10, 限定用户一次性最多上传多少个文件，在上传过程中，该数字会累加，如果设置为“0”，则表示没有限制
file_queue_limit : 2, 上传队列数量限制，该项通常不需设置，会根据file_upload_limit自动赋值
flash_url : "http://www.swfupload.org/swfupload_f9.swf", Flash控件的URL
flash_width : "1px",
flash_height : "1px",
flash_color : "#FFFFFF",
debug : false, 是否显示调试信息
swfupload_loaded_handler : swfupload_loaded_function, 当Flash控件成功加载后触发的事件处理函数
file_dialog_start_handler : file_dialog_start_function, 当文件选取对话框弹出前出发的事件处理函数
file_queued_handler : file_queued_function,
file_queue_error_handler : file_queue_error_function,
file_dialog_complete_handler : file_dialog_complete_function, 当文件选取对话框关闭后触发的事件处理函数
upload_start_handler : upload_start_function, 开始上传文件前触发的事件处理函数
upload_progress_handler : upload_progress_function,
upload_error_handler : upload_error_function,
upload_success_handler : upload_success_function, 文件上传成功后触发的事件处理函数
upload_complete_handler : upload_complete_function,
debug_handler : debug_function,
custom_settings : { 自定义设置
custom_setting_1 : "custom_setting_value_1",
custom_setting_2 : "custom_setting_value_2",
custom_setting_n : "custom_setting_value_n",
}
}
SWFUpload中的File Object
在SWFUpload的使用过程中，无论在客户端还是服务器端都要和File Object打交道，在一个File Object中包含了以下内容：
{
id : string, // SWFUpload file id, used for starting or cancelling and upload
index : number, // The index of this file for use in getFile(i)
name : string, // The file name. The path is not included.
size : number, // The file size in bytes
type : string, // The file type as reported by the client operating system
creationdate : Date, // The date the file was created
modificationdate : Date, // The date the file was last modified
filestatus : number, // The file's current status. Use SWFUpload.FILE_STATUS to interpret the value.
}
SWFUpload中的方法
+ setPostParams (param_object)
- 描述
动态修改SWFUpload初始化设置中的post_params属性，其中所有的值都将被覆盖。
- 参数
param_object:一个simple JavaScript object，所有的name/value都必须是字符串，例如（this.setPostParams({ "Mari": name });）。
- 返回
void
SWFUpload中的事件
SWFUpload在运行过程中提供了多种事件，这些事件可以让开发者借助句柄来改变页面UI、改变行为，或者报告错误。所有这些事件都可以在一个SWFUpload实体中被调用，这意味着在这些事件对应的函数中，你可以用 this 关键字来代替引用SWFUpload实体。
+ fileDialogComplete (number of files selected)
- 触发条件
1. 用户选择好了要上传文件，并关闭对话框；
2. 用户什么也没选，并取消对话框；
如果你希望在用户选择完文件后自动开始上传操作，那么可以将 this.startUpload() 操作放在这里。
- 传入参数
number of files selected：将返回用户所选取的文件个数。
+ uploadStart (file object)
- 触发条件
该事件在文件上传之前触发，它用于完成一些准备工作，比如传递参数；负责响应该事件的句柄函数可以有2个返回值（true 或 false）当返回值为false时，整个上传将被取消；当返回值为true时上传过程继续进行。而如果返回值为false，则通常是由一个uploadError事件所导致的。
注：官方帮助文档的原文中对该事件的描述中有这样一句：“If you return 'true' or do not return any value then the upload proceeds.”，从中可以看到既定的设计是当不返回任何值的时候应该等同于返回true，但是笔者在开发中发现必须明确返回值，否则上传进程将停止响应，不知是否是一个bug呢？
- 传入参数
file object：文件对象
+ uploadComplete (file object)
- 触发条件
在完成一个上传周期后（在uploadError 或 uploadSuccess之后），此时一个上传操作已经结束，另一个上传操作可以开始了。
- 传入参数
file object：文件对象
+ uploadProgress (file object, bytes complete, total bytes)
- 触发条件
该事件在整个文件的上传过程中定期性的被Flash控件自动触发，用以帮助开发者实时更新页面UI来制作上传进度条。
注意：该事件在Linux版本的Flash Player中存在问题，目前还无法解决。
- 传入参数
file object：文件对象
bytes complete：已经上传完毕的文件字节数
total bytes：文件总体积的字节数
常见错误
■ 所上传的文件体积并未超出SWFUpload所设置的数值，但为何无法成功上传？
□ 通常这是由于服务器端的限制所造成的，以Apache+PHP为例，请修改php.ini中的post_max_size与upload_max_filesize两项设置。
■ 在带有Session验证的网站后台中SWFUpload无法正常工作？
□ 这是因为SWFUpload在上传时相当于重新开辟了一个新的Session进程，因此无法与原有程序的Session保持一致，这就需要在上传时传递原有程序的SessionID，根据它来“找回”其应有的Session。
这两个工具都只是一些FLASH和Javascript脚本，只是实现了客户端批量选择的问题，要上传到服务器，还要靠后台的程序（asp,jsp,php等），如果ASP版也就是upload.asp文件；批量上传一般是只把文件上传到服务器(数据库一般只记录文件名和路径，这是锦上添花的事)具体的使用还需要研究测试，有结果后在这里分享。
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/xiake8615/archive/2008/08/06/2774541.aspx
