搜索:
首页 >> 下载中心 >> JavaScript源码 >> SWFUpload介绍 使用SWFUpload上传文件

SWFUpload介绍 使用SWFUpload上传文件

2011-4-30 来源:GearCode's Blog 网友评论投递文章

什么是SWFUpload

SWFUpload是一个网站前端文件上传组件。SWFUpload通过flash+javascript,实现在不刷新网页的条件下,多个文件批量上传(实际上是逐个上传)、以及显示上传进度。

SWFUpload基本原理

1、传统的html表单文件上传

传统的文件上传是使用下面这种Form的:

<form id="file-form" action="http://www.gearcode.com/upload.php" enctype="multipart/form-data" method="post">
     <input name="filename" type="file" />
      <input type="submit" value="上传" />  </form> 

这样的表单,每个input file只能选择一个文件,如果用户想批量上传,则需要使用js动态的向表单中添加“<input type="file" name="filename"/>”。用户则需要去点击每一个input file的“浏览”按钮,打开选择文件的窗口去逐个选择文件。而不是打开一个能选择多个文件的窗口,一次性的使用ctrl或shift等快捷键选择一个或多个文件。

而且,当用户选择好文件,点击上传后,表单就会提交出去,至于文件上传的进度如何,上传速度怎样,都不得而知。

2、使用SWFUpload后的上传

SWFUpload通过向网页中插入一个flash按钮,让用户点击来弹出文件选择的对话框。也就是说,选择文件对话框,是由swfupload.swf中弹出的,当然这需要用户点击这个flash才可以。所以swfupload在初始化时需要设置它显示出来的按钮的样式,例如宽、高、背景色、字体、内间距、图片等等……。除了这些样式,还需要设置按钮显示的位置,以及其他一些配置,这些常用配置在本文的后面会详细介绍。

因为SWFUpload的选择文件对话框是由flash弹出的,所以这个对话框是可以选择多个文件的。选择好文件以后,swfupload.swf会回调一些javascript函数,将选择文件的一些基本信息作为参数传给这些回调函数,以便开发者通过设置这些回调函数,来改变html从而将这些文件信息显示到页面中。

在选择好要上传的文件后,这些文件就会被加入到swfupload的上传队列中,一旦调用swfupload实例的“startUpload()”函数,swfupload就会通过flash将文件上传到我们指定的地址,这个上传地址也是可以在实例化SWFUpload时设置的,而这个地址则是一个接收文件的action,例如传统文件上传表单中的action="upload.php"。这里需要注意的是,调用startUpload后,swfupload只会将上传文件队列中的第一个未上传的文件提交出去,而不是同时将上传文件队列中所有的文件提交出去,如果在一个文件上传完毕后,再次调用startUpload,swfupload就会开始上传队列中下一个没有上传的文件。所以,如果想实现自动批量上传的话,只需要在上传完成的回调函数中,去调用startUpload就可以了。

在上传过程中,swfupload会有很多的事件产生,例如上传开始、上传进度变化、上传出错、上传成功、上传完成……我们可以设置这些事件的回调函数,swfupload在发生这些事件的时候,会去调用我们的回调函数,并将相应的信息以参数的形式发送给我们的回调函数。这样我们便可以通过处理这些事件来动态的显示文件上传的状态、进度等信息了。

Tags:SWFUpload  上传  组件 
站长工具
Google PR 查询:
相关文章
loading 请稍等,评论加载中...

学习Asp到Asp之家(Aspxhome.com)

闽ICP备09044667号-4