本文主要是介绍使用SWFUpload上传文件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
什么是SWFUpload
SWFUpload是一个网站前端文件上传组件。SWFUpload通过flash+javascript，实现在不刷新网页的条件下，多个文件批量上传（实际上是逐个上传）、以及显示上传进度。
SWFUpload基本原理
1、传统的html表单文件上传
传统的文件上传是使用下面这种Form的：
1 | <form id="file-form" action="http://www.gearcode.com/upload.php" enctype="multipart/form-data" method="post"> |
2 | <input name="filename" type="file" /> |
3 | <input type="submit" value="上传" /> |
这样的表单，每个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在发生这些事件的时候，会去调用我们的回调函数，并将相应的信息以参数的形式发送给我们的回调函数。这样我们便可以通过处理这些事件来动态的显示文件上传的状态、进度等信息了。
开始前的准备
1、获取SWFUpload
SWFUpload的官方地址为：http://www.swfupload.org/，SWFUpload的下载放在了google code上：http://code.google.com/p/swfupload/downloads/list，此文使用的是：SWFUpload v2.2.0.1。
2、在线文档
http://demo.swfupload.org/Documentation/
3、SWFUpload 2.2 的Demos
http://demo.swfupload.org/v220/index.htm
使用SWFUpload上传文件
1、初始化SWFUpload
首先将下载下来的“SWFUpload v2.2.0.1 Core”压缩包解压，会得到一个swfupload.js、以及一个swfupload.swf（在Flash目录中），将这两个文件copy到你的项目中。压缩包中还会有一些其他的文件，例如英文的文档、ChangeLog、License等文件，不在本文讨论范围内，实际应用时也无需导入到你的项目中。
在使用SWFUpload上传组件的页面引入swfupload.js：
1 | <script type="text/javascript" src="http://www.gearcode.com/lib/swfupload/swfupload.js" type="text/javascript"></script> |
这个swfupload.js是SWFUpload组件提供的一个javascript类库，是用来初始化及设置swfupload.swf的。其中有一个名为“SWFUpload”的function，我们通过创建这个function的实例来初始化SWFUpload，同时传入一些初始化配置信息。需要注意的是，一定要在网页加载完成后再去new这个SWFUpload，因为swfupload.swf是通过替换掉页面中的一个html元素来确定自己显示出来的位置的。所以如果在这个html元素还没被创建出来的时候，就去实例化SWFUpload的话，就会出现javascript错误。
实例化SWFUpload，并设置初始化参数：
04 | swfu = new SWFUpload(config == undefined ? { |
05 | upload_url : path+"/fileUpload.action", |
06 | flash_url : path+"/plugin/uploader/SWFUpload/swfupload.swf", |
07 | file_size_limit : "20 KB", |
08 | file_types : "*.jpg;*.jpeg;*.png;*.bmp;*.gif", |
09 | file_types_description : "All Image Files", |
10 | file_post_name : "fileQueue", |
12 | button_placeholder_id : "spanSWFUploadButton", |
15 | button_text : "<b>添加文件</b>", |
16 | button_text_left_padding : 3, |
17 | button_text_top_padding : 2, |
18 | button_cursor : SWFUpload.CURSOR.HAND, |
21 | file_queued_handler : Handler.fileQueued, |
22 | file_queue_error_handler : Handler.fileQueueError, |
23 | upload_complete_handler : Handler.uploadComplete, |
24 | upload_start_handler : Handler.uploadStart, |
25 | upload_progress_handler : Handler.uploadProgress, |
26 | upload_success_handler : Handler.uploadSuccess |
通过上面的代码可以创建一个SWFUpload的实例“swfu”，后面对文件队列的操作都需要通过调用这个实例的方法来完成。
初始化参数中“button_placeholder_id”为页面上的一个html节点的ID，成功初始化SWFUpload后，会将此节点替换为swfupload.swf。其他以“button_”开头的参数都是用来设置swfupload.swf的显示样式的。大部分初始化参数非常简单，这里不一一赘述，用户可以查阅前面提到的SWFUpload的在线文档。这里有一点需要注意，初始化SWFUpload后，页面上对应的html节点被替换为我们设置的flash按钮，但如果你的页面不是以http协议打开的，点击这个按钮是不会弹出选择文件对话框的。
例如，我直接在桌面上的文件夹中打开页面：
file:///C:/Documents and Settings/JasonLee/桌面/upload/upload.html
以这样的方式打开页面，点击flash按钮是不会弹出选择文件对话框的。所以测试的时候要将页面上传部署到服务器上，以http协议打开，例如：
http://www.gearcode.com/demo/file-upload/upload.html
2、开始上传
完成初始化以后，点击flash上传按钮便会打开选择文件对话框。选择好文件后，对话框关闭，被选择的文件将进入上传队列。如果要开始上传，只需要调用SWFUpload的startUpload函数即可，例如：
但是如果队列中有多个文件，调用startUpload()后只会上传第一个未上传的文件，所以前面提到了，SWFUpload的批量上传实际上就是自动逐个上传文件。如果要实现自动批量上传只需要在上传文件成功后，再次调用开始上传方法。我们可以通过设置SWFUpload的handler函数来实现：
1 | upload_complete_handler: function(file) { |
3、handler函数
SWFUpload在工作的过程中，会产生很多事件。这些事件对我们来说有很多用处（例如想在页面中显示文件大小、上传进度、速度等信息），我们可以设置handler函数来监控这些事件，当SWFUpload触发这些事件时，会主动调用我们设置的回调函数，并将文件信息作为参数传递给我们的回调函数。
SWFUpload的handler函数有很多，这里只介绍以下6个常用的事件回调函数：
| 事件名称 | 初始化参数名称 | 参数 | 事件触发 |
|---|
| fileQueued | file_queued_handler | file | 每个文件进入上传队列时触发 |
| fileQueueError | file_queue_error_handler | file, errorCode, message | 每个文件进入上传队列时，如果出错则触发 |
| uploadStart | upload_start_handler | file | 每个文件开始上传时触发 |
| uploadProgress | upload_progress_handler | file, bytesLoaded, bytesTotal | 每个文件的上传进度发生改变时触发 |
| uploadSuccess | upload_success_handler | file, serverData | 每个文件上传成功后触发 |
| uploadComplete | upload_complete_handler | file | 每个文件上传完毕后触发 |
例如我需要监听uploadProgress事件，则需要在SWFUpload初始化时，设置upload_progress_handler参数的值：
3 | upload_progress_handler: uploadProgress |
然后再建立监听事件的回调函数：
1 | function uploadProgress(file, bytesLoaded, bytesTotal) { |
这样，在文件上传时，每次上传进度发生改变，都会调用uploadProgress这个函数，并且将文件的信息、已经上传的字节数、文件的总字节数发送给回调函数。
其他的回调函数使用方法都一样，这里就不一一介绍了，最后介绍一下回调函数的参数file。几乎所有的回调函数都会将file作为参数，file是一个javascript对象，其结构如下（来自官方的在线文档）：
{
id : string,
index : number,
name : string,
size : number,
type : string,
creationdate : Date,
modificationdate : Date,
filestatus : number,
}
下面是file对象中的每个属性的简单说明：
| 属性名 | 类型 | 说明 |
|---|
| id | string | SWFUpload为队列中的文件生成的ID |
| index | number | 文件的索引值，使用getFile(index)可以获取该文件 |
| name | string | 原文件名，不包含原文件目录 |
| size | number | 文件的尺寸，单位：byte |
| type | string | 文件类型 |
| creationdate | Date | 文件的创建时间 |
| modificationdate | Date | 文件的最后修改时间 |
| filestatus | number | 文件在上传队列中的状态，可以使用SWFUpload.FILE_STATUS比较值 |
结束语
至此，我们已经掌握了SWFUpload的基本使用方法。因为作者技术不精，ActionScript的知识基本为零，所以就不再深入分析SWFupload的代码了。我在写文章的同时，制作了一个demo，代码很丑，只供菜鸟下载：
SWFUpload-demo.zip
这篇关于使用SWFUpload上传文件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
