n 可以同时选择多个文件进行上传;
n 以队列的形式排列要上传的文件和其相关信息(如名称、大小等)(美观^_^);
n 可以设置要上传的文件个数、文件类型和文件大小(实用^_^);
n 有上传进度显示(感觉这个非常直观,很方便实用);
n 上传的过程中可以随时取消要上传的文件;
n 平台独立性,由于使用flash和成熟的AJAX框架(mootools)可以避免对特定浏览器和服务器依赖!
n 使用简单,文件体积小!(这个才是最实在的,呵呵)
n 表单无须设置enctype="multipart/form-data"了(这个有点意思吧)
? 在onload方法中调用如下代码:
var upload = new FancyUpload(
$(“fileId”),
{
swf: 'Swiff.Uploader.swf'
}
);
我们只要这一行代码就可以工作了,不过我们可以通过像设置swf一样来设置多个参数来控制我们的上传,比如是否使用队列,控制文件大小等。相关的参数意义如下:
fileId 就是我们页面上文件域的ID,即type为file的input元素的ID;
{} 这样包起来的参数就是我们的可选参数了,可参考FancyUpload.js中的说明。
? 在页面上设置类似mytest.html中的body区域的代码即可!
三、 FancyUpload的参数说明
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
所有文件上传成功后的调用方法!
四、 表单文件域和参数同时上传实战
在你自己试过这个上传组件后,是不是感觉非常好用的,但同时你也或许发现了一个问题,那就是表单中的参数怎么进行上传的问题。因为该组件是采用FLASH+AJAX进行上传的,即页面是不刷新的,而且上传的过程中仅仅是上传了你选择的文件,而所有的表单非文件域参数则被忽略了。那我们如何来进行文件和参数的同步上传呢,这里有几个问题要注意的就是: