SWFUpload控件使用

简介

SWFUpload是一个客户端文件上传工具，主要特点是：

• 能够完成多文件。
• 实现无刷新页面上传。
• 随时空中上传进度。
• 可以与其他库进行兼容。
• 支持Flash9及以上版本。

使用SWFUpload进行上传的页面如下：

 

 

使用方法

使用SWFUpload需要一些Js和DOM知识。

SWFUpload由4部分组成：

1. 用于进行初始化和设置的 Js文件
2. 一个Js库：SWFUpload.js
3. Flash控件: swfupload.swf
4. JavaScript事件处理程序

下面分别介绍这4个部分

初始化和设置

初始化通常在window.onload事件中进行，通过SWFUpload的构造函数来完成。

方法一：

var swfu;
window.onload = function () { 
swfu=new SWFUpload({ 
upload_url:"http://www.swfupload.org/upload.php", 
flash_url:"http://www.swfupload.org/swfupload.swf",
file_size_limit:"20 MB" }); 
};

 

方法二：

var swfu;
window.onload = function () { 
var settings_object={ 
upload_url:"http://www.swfupload.org/upload.php", 
flash_url:"http://www.swfupload.org/swfupload.swf",
file_size_limit:"20 MB" }); 
swfu=new SWFUpload（settings_object）;
};

 

 

JavaScript库

swfupload.js文件必须在网页中被引用

<script type="text/javascript" src="swfupload/swfupload.js"></script>

Flash控件

该控件必须在初始化时被动态加载。

 

 

事件处理程序

开发人员必须创建一个JavaScript函数处理SWFUpload事件。

 

 

 

完整示例

1.         首先，将所有的文件放到项目当中，如图

 

2.         在网页文件中，引入所有需要的文件，如下

 

  <script type="text/javascript" src="swfupload/swfupload.js"></script>
    <script type="text/javascript" src="js/swfupload.queue.js"></script>
    <script type="text/javascript" src="js/fileprogress.js"></script>
    <script type="text/javascript" src="js/handlers.js"></script>

 

3.         编写脚本，对SWFUpload进行初始化设置，设置一些基本的参数。

 

 

 

4.         完成上传部分的html

 

 

5.         在upload.aspx.cs中对上传的文件进行处理

 

 

这样，就完成了使用SWFUpload控件的所有步骤。

 

备注

除了最基本的功能以外，本控件还有很多灵活的功能让开发人员自行使用。其中比较常用到的是handlers.js文件中定义的大量的上传过程的事件，例如

fileDialogComplete(numFilesSelected, numFilesQueued)

uploadStart(file)

uploadProgress(file, bytesLoaded, bytesTotal)

uploadSuccess(file, serverData)

uploadComplete(file)

uploadError(file, errorCode, message)

fileDialogStart()

等等

这些事件开发人员都可以根据自己的需要进行修改，使用起来非常方便。