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()

等等

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