FancyUpload说明文档

应用部署

 

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

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

在页面上设置CSS样式（主要是文件列表和上传进度的样式）
在onload方法中调用如下代码：
var upload = new FancyUpload(
    $(“fileId”),
    {
        swf: 'Swiff.Uploader.swf'
    }
);
相关的参数意义如下：
fileId   就是我们页面上文件域的ID，即type为file的input元素的ID；
{}     这样包起来的参数就是我们的可选参数了，可参考FancyUpload.js中的说明。

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中获取上传的路径信息