Ajax+Flash多文件上传之FancyUpload的应用

 一、   简单说明<o:p></o:p>

Ajax+Flash多文件上传是一个开源的上传组件，名称是FancyUpload，其官方网址是：http://digitarald.de/project/fancyupload/。这个组件仅仅是客户端的应用组件，即与任何服务器端的技术没有关系，服务器端可以采用任何后台技术（如JSP、Servlet、ASP等）。应用该组件提供给我们的最大的好处有如下几点（个人认为，呵呵）：

<o:p></o:p>

n         可以同时选择多个文件进行上传；

n         以队列的形式排列要上传的文件和其相关信息（如名称、大小等）（美观^_^）；

n         可以设置要上传的文件个数、文件类型和文件大小（实用^_^）；

n         有上传进度显示（感觉这个非常直观，很方便实用）；

n         上传的过程中可以随时取消要上传的文件；

n         平台独立性，由于使用flash和成熟的AJAX框架（mootools）可以避免对特定浏览器和服务器依赖！

n         使用简单，文件体积小！（这个才是最实在的，呵呵）

n         表单无须设置enctype="multipart/form-data"了（这个有点意思吧）

<o:p> </o:p>

二、   应用部署<o:p></o:p>

文件夹fancyupload中的文件就是该组件所需要到的所有文件了，包括四个JS、二个图片、一个swf文件，另外还包含一个简单的测试html页面，其文件结构如下：

<o:p> </o:p>

将整个文件夹copy到你的web应用目录即可，使用的时候其步骤和代码如下：

<o:p></o:p>

Ø         引入JS文件
    在页面上依次引入mootools-release-1.11.js、Swiff.Base.js、Swiff.Uploader.js、FancyUpload.js这四个JS，具体目录请依据自己的情况进行设置！

<o:p></o:p>

Ø         在页面上设置CSS样式（主要是文件列表和上传进度的样式）
    在head之间嵌入mytest.html中的css代码！

<o:p></o:p>

Ø         在onload方法中调用如下代码：
var upload = new FancyUpload(
    $(“fileId”),
    {
        swf: 'Swiff.Uploader.swf'
    }
);
我们只要这一行代码就可以工作了，不过我们可以通过像设置swf一样来设置多个参数来控制我们的上传，比如是否使用队列，控制文件大小等。相关的参数意义如下：
fileId   就是我们页面上文件域的ID，即type为file的input元素的ID；
{}     这样包起来的参数就是我们的可选参数了，可参考FancyUpload.js中的说明。

<o:p></o:p>

Ø         在页面上设置类似mytest.html中的body区域的代码即可！

<o:p> </o:p>

<o:p></o:p>

来看一个文件上传的实际效果，如下图：

<o:p></o:p>

三、   FancyUpload的参数说明<o:p></o:p>

u       url
文件上传的地址，如果不指定，那么将会自动取文件域所在的表单的action值来进行上传。如果表单的action也没有指定值，那么将尝试获取路径栏中的地址来进行文件上传。一般而言我们都需要指定该参数和文件域所在的表单的action两者之一！

u       swf
就是组件中的flash文件了，主要是用来选择文件和过滤等，基本上可以不用设置。

u       multiple
是否允许选择多个文件，默认是true。这个多选是指在打开的文件对话框中按住ctr键进行多文件的选中。

u       queued
是否允许队列上传，默认是true。

u       types
指定上传文件的类型，采用的格式是 {提示信息:文件类型}，如只允许媒体文件上传的例子：{“媒体文件(*.rm,*.avi)” : “*.rm; *.avi”}

u       limitSize
指定限制的文件大小，单位是字节！默认是不限制，超过此值的文件将不被选中，注意即使选择后系统也没有提示，但是队列中也是没有该文件的！可以通过修改文件FancyUpload.js，在其128行的if语句中加上一个alert提示即可！

u       limitFiles
限制的文件个数，默认是不限制！

u       createReplacement
一个自定义函数（参数为文件域对象），用来替换文件域，默认是被替换成为一个按钮！具体的代码可以参考FancyUpload.js中的第101到111行的代码。默认我已经将其按钮的值改成了中文的“浏览文件”。

u       instantStart
表示选择文件后是否立即开始上传，默认是false！也建议不要设置为true，上传的操作我们可以交给该文件域所在表单的提交按钮，这也是自动绑定的，无须我们做任何操作。

u       allowDuplicates
是否允许队列中选择重复的文件，默认是false！注释中是true，而代码中是false，所以以代码中的为准。

u       container
flash文件的容器对象，默认是document.body，可以不用修改！

u       optionFxDuration
文件添加到队列后，其高亮度到消失高亮度的时间，默认是250ms！也就是渐逝的时间长度。

u       queueList
来列表显示文件队列的容器对象或其ID。

u       onComplete
单个文件上传成功后调用的方法，非AJAX，无回调参数。每个文件上传成功后都将调用该方法一次！

u       onAllComplete
所有文件上传成功后的调用方法！

<o:p> </o:p>

四、   表单文件域和参数同时上传实战<o:p></o:p>

在你自己试过这个上传组件后，是不是感觉非常好用的，但同时你也或许发现了一个问题，那就是表单中的参数怎么进行上传的问题。因为该组件是采用FLASH+AJAX进行上传的，即页面是不刷新的，而且上传的过程中仅仅是上传了你选择的文件，而所有的表单非文件域参数则被忽略了。那我们如何来进行文件和参数的同步上传呢，这里有几个问题要注意的就是：

<o:p></o:p>

1）           由于该组件是绑定了表单的submit方法，所以不能够直接在js中使用$(‘表单ID’).submit()这样的方式来进行表单上传，否则参数是传上去了而文件则没有；

2）           如果没有做设置那么只要选择了文件而且触发了表单的submit事件，那么该组件就会开始上传文件，即使我们加了onsubmit方法中的return false也无效；

3）           在第二条的基础上我们如何保证用户既选择了文件而且又输入了表单的所有必填参数呢？

<o:p></o:p>

这些问题在经过本人一天的实际摸索后，终于得到了解决，呵呵，现说明如下：

<o:p></o:p>

1）  首先是上传前的参数检查
    这包括表单中的必填参数和文件的选择与否的判断。既然我们无法通过直接点击submit按钮进行提交前检查，那么我们就用一个普通的按钮，设置一个onclick事件，通过这个事件来进行参数的检查。这个即可避免选择了文件但又没有输入参数的误提交，又检查了整个数据的完整性，其代码如下：
    <input type=”button” value=”提交” onclikc=”checkSubmit()” />
    在checkSubmit方法中我们可以通过调用对象FancyUpload的fileList属性来判断用户是否选择了文件，其代码如下（假设你的FancyUpload对象的实例名称是uploader）：
    if (uploader. fileList.length < 1) {
        alert(‘请选择要上传的文件！’);
    }
    通过判断这个属性（类型为数组）的长度来查看用户是否选择了文件，具体的个数就需要用户自己进行判断了，我这里是一个文件。

<o:p> </o:p>

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提交，那就要看自己的需求了。

<o:p> </o:p>

3）  上传文件的路径和表单参数的绑定
    由于我们的文件上传和表单参数上传是分成两个部分进行上传的，这就出现了如何将两次上传的参数进行绑定的问题。而且查看官方上的评论，作者也没有给出解决方法，而且该组件只能检测错误时的状态码（00 < status < 300），对于上传成功是无法获取任何返回信息的。目前我的解决方法就是：
    1. 文件上传成功后将路径信息存储以原始文件名为key存储在session中；
    2. 参数进行上传时根据原始文件的名称去从session中获取上传的路径信息
    通过这二步基本上就可以绑定两次上传的参数了！如果有更好的方法大家也可以一起探讨。

<o:p> </o:p>

所以通过以上三个步骤后我们就可以实现文件的无刷新上传和进度显示了！^_^另外这个分步进行上传是相对表单参数比较多的情况，如果参数比较少的话可以直接将参数附加在URL地址后面进行也是可以的，这就要靠个人的发挥了。

<o:p> </o:p>

Good Luck!

评论

7 楼 mj4678 2008-11-20  

的确不能用了。需要支持flash10的版本出现

6 楼 hanshen007 2008-11-15  

现在不行了，需要支持flash10的版本出现

5 楼 ferreousbox 2008-08-03  

to guying1028
    附件里的例子是可以跑的，但是需要服务端的支持，你可以找到那个url地址，然后再本地建立一个web应用，设置一样的路径即可。

to pn2008
    struts2中有文件上传拦截器，直接配置后就可以用了，上传过程不需要理会，action中会有一个File对象的。

4 楼 guying1028 2008-07-31  

朋友，能不能给个能跑起来的例子，这个上传不了啊？

3 楼 pn2008 2008-05-27  

在struts中集成，在Action中怎么取得要上传文件的信息呢（文件名，大小，类型等）？

2 楼 chenxy019 2008-04-23  

进度条都己经显示Completed了，到服务器去看，为什么没看到上传上来的文件啊？

1 楼 qiaoxia_lan 2007-12-28  

我下载了怎么不能上传呀！