Flash+ASP.NET多文件上传(附源代码)

关于多文件上传，以前我一直使用JQuery去动态创建文件选择组件，然后POST到服务器去。最近一段时间一直在Flash身边打滚，Flash对于多文件上传有很好的支持，于是我写了一个Flash的多文件上传组件，然后将其封装为ASP.NET控件，当我们在开发ASP.NET程序的时候可以像使用普通控件一样，从工具箱里拉到界面上就可以使用。

Flash我采用Flex开发的，实现了选择文件和统计文件大小的功能，选择了多个文件时会动态的创建Flex组件显示到界面上，并且可以移除所选择的文件。以下是Flex项目结构图：

Flex是完全基于事件驱动的开发模型，通过自定义一个Flex的Application来实现文件的多选和文件数量以及上传文件大小的统计等功能。如上图的FileUpload就是自定义的一个组件，扩展自VBox实现了动态创建组件和处理事件。详细参考下面代码：

自定义Application代码
package components
{
import flash.events.*;
import flash.net.*;

import mx.containers.*;
import mx.controls.*;
import mx.core.Application;
import mx.events.*;

/**//**
* 自定义一个Flex的Application,继承于Application
* */
public class CustomApplication extends Application
{
//文件上传列表
private var fileRefList:FileReferenceList;
private var fileRefListener:Object;
private var _totalSize:Number;
private var _uploadedBytes:Number;
private var _currentUpload:FileUpload;
private var _uploadFileSize:Number;
private var _totalUploadSize:Number;
private var _fileTypeDescription:String;
private var _fileTypes:String;

public var fileContainer:VBox;
public var fileUploadBox:VBox;
public var uploadStats:HBox;
public var totalFiles:Text;
public var totalSize:Text;
public var totalProgressBar:ProgressBar;
public var browseButton:Button;
public var clearButton:Button;
public var uploadButton:Button;
public var cancelButton:Button;
public var mytext:Text;

public function CustomApplication()
{
super();
addEventListener(FlexEvent.CREATION_COMPLETE,onLoad);
}

private function onLoad(evt:Event):void
{
fileRefList = new FileReferenceList();
_totalSize = 0;
_uploadedBytes = 0;

fileRefList.addEventListener(Event.SELECT,OnSelect);
browseButton.addEventListener(MouseEvent.CLICK,OnAddFilesClicked);
clearButton.addEventListener(MouseEvent.CLICK,OnClearFilesClicked);
uploadButton.addEventListener(MouseEvent.CLICK,OnUploadFilesClicked);
cancelButton.addEventListener(MouseEvent.CLICK,OnCancelClicked);

var temp:String = Application.application.parameters.fileSizeLimit;
if(temp != null && temp != “”)
_uploadFileSize = new Number(temp);
else
_uploadFileSize = 0;

temp = Application.application.parameters.totalUploadSize;
if(temp != null && temp != “”)
_totalUploadSize = new Number(temp);
else
_totalUploadSize = 0;

_fileTypeDescription = Application.application.parameters.fileTypeDescription;
_fileTypes = Application.application.parameters.fileTypes;
}

//选择文件
private function OnAddFilesClicked(event:Event):void
{
if(_fileTypes != null && _fileTypes != “”)
{
if(_fileTypeDescription == null || _fileTypeDescription == “”)
_fileTypeDescription = _fileTypes;

var filter:FileFilter = new FileFilter(_fileTypeDescription, _fileTypes);

fileRefList.browse([filter]);
}
else
fileRefList.browse();
}

private function OnClearFilesClicked(event:Event):void
{
if(_currentUpload != null)
_currentUpload.CancelUpload();
fileUploadBox.removeAllChildren();
SetLables();

_uploadedBytes = 0;
_totalSize = 0;
_currentUpload == null;
}

/**//**
* 上传文件事件处理函数
* */
private function OnUploadFilesClicked(event:Event):void
{
//获取所有的文件
var fileUploadArray:Array = fileUploadBox.getChildren();
var fileUploading:Boolean = false;
_currentUpload = null;

uploadButton.visible = false;
cancelButton.visible = true;

for(var x:uint=0;x<fileUploadArray.length;x++)
{
if(!FileUpload(fileUploadArray[x]).IsUploaded)
{
fileUploading = true;
_currentUpload = FileUpload(fileUploadArray[x]);
_currentUpload.Upload();
break;
}
}
//所有文件上传完毕
if(!fileUploading)
{
OnCancelClicked(null);
// 获取JavaScript方法
var completeFunction:String = Application.application.parameters.completeFunction;
// 执行JavaScript方法（completeFunction）给flash设置参数值
if(completeFunction != null && completeFunction != “”)
navigateToURL(new URLRequest(“javascript：”+completeFunction),”_self”);
}
}

private function OnCancelClicked(event:Event):void
{
if(_currentUpload != null)
{
_currentUpload.CancelUpload();
_uploadedBytes -= _currentUpload.BytesUploaded;
_currentUpload = null;
}
SetLables();
uploadButton.visible = true;
cancelButton.visible = false;
}

/**//**
* 选择文件事件处理函数
* */
private function OnSelect(event:Event):void
{
var uploadPage:String = Application.application.parameters.uploadPage;

var tempSize:Number = _totalSize;

for(var i:uint=0;i<fileRefList.fileList.length;i++)
{
//动态创建组件
if(_uploadFileSize > 0 && fileRefList.fileList[i].size > _uploadFileSize)
OnFileSizeLimitReached(fileRefList.fileList[i].name);
if(_totalUploadSize > 0 && tempSize + fileRefList.fileList[i].size > _totalUploadSize)
{
OnTotalFileSizeLimitReached();
break;
}

if((_uploadFileSize == 0 || fileRefList.fileList[i].size < _uploadFileSize) && (_totalUploadSize == 0 || tempSize + fileRefList.fileList[i].size < _totalUploadSize))
{
var fu:FileUpload = new FileUpload(fileRefList.fileList[i],uploadPage);
fu.percentWidth = 100;
fu.addEventListener(“FileRemoved”,OnFileRemoved);
fu.addEventListener(“UploadComplete”,OnFileUploadComplete);
fu.addEventListener(“UploadProgressChanged”,OnFileUploadProgressChanged);
fu.addEventListener(HTTPStatusEvent.HTTP_STATUS,OnHttpError);
fu.addEventListener(IOErrorEvent.IO_ERROR,OnIOError);
fu.addEventListener(SecurityErrorEvent.SECURITY_ERROR,OnSecurityError);
fileUploadBox.addChild(fu);
tempSize += fileRefList.fileList[i].size;
}
}

SetLables();
}

private function OnFileRemoved(event:FileUploadEvent):void
{
_uploadedBytes -= FileUpload(event.Sender).BytesUploaded;
fileUploadBox.removeChild(FileUpload(event.Sender));
SetLables();
if(_currentUpload == FileUpload(event.Sender))
OnUploadFilesClicked(null);
}

private function OnFileUploadComplete(event:FileUploadEvent):void{
_currentUpload == null;
OnUploadFilesClicked(null);
}

private function OnTotalFileSizeLimitReached():void
{
Alert.show(“文件总大小超出上传限制.”);
}

private function OnFileSizeLimitReached(fileName:String):void
{
Alert.show(“文件 ‘” + fileName + “‘ 太大不能添加到上传队列.”);
}

private function OnHttpError(event:HTTPStatusEvent):void
{
Alert.show(“HTTP错误: 状态码 ” + event.status);
}

private function OnIOError(event:IOErrorEvent):void
{
Alert.show(“文件流错误: ” + event.text);
}

private function OnSecurityError(event:SecurityErrorEvent):void
{
Alert.show(“安全错误: ” + event.text);
}

//处理文件上传进度
private function OnFileUploadProgressChanged(event:FileUploadProgressChangedEvent):void
{
_uploadedBytes += event.BytesUploaded;
SetProgressBar();
}

private function SetProgressBar():void
{
totalProgressBar.setProgress(_uploadedBytes,_totalSize);
totalProgressBar.label = “已上传 ” + FileUpload.FormatPercent(totalProgressBar.percentComplete) + “% – ”
+ FileUpload.FormatSize(_uploadedBytes) + ” of ” + FileUpload.FormatSize(_totalSize);
}

private function SetLables():void
{
var fileUploadArray:Array = fileUploadBox.getChildren();
if(fileUploadArray.length > 0)
{
totalFiles.text = String(fileUploadArray.length);
_totalSize = 0;
for(var x:uint=0;x<fileUploadArray.length;x++)
{
_totalSize += FileUpload(fileUploadArray[x]).FileSize;
}
totalSize.text = FileUpload.FormatSize(_totalSize);
SetProgressBar();
clearButton.visible = uploadButton.visible = totalProgressBar.visible = uploadStats.visible = true;
}
else
{
clearButton.visible = uploadButton.visible = totalProgressBar.visible = uploadStats.visible = false;
}
}
}
}

自定义组件
package components
{
import flash.events.Event;
import flash.events.HTTPStatusEvent;
import flash.events.IOErrorEvent;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.events.SecurityErrorEvent;
import flash.net.FileReference;
import flash.net.URLRequest;

import mx.containers.HBox;
import mx.containers.VBox;
import mx.controls.Button;
import mx.controls.ProgressBar;
import mx.controls.ProgressBarMode;
import mx.controls.Text;
import mx.core.ScrollPolicy;

public class FileUpload extends VBox
{
private var bar:ProgressBar;
private var _file:FileReference;
private var nameText:Text;
private var _uploaded:Boolean;
private var _uploading:Boolean;
private var _bytesUploaded:uint;
private var _uploadUrl:String;
private var button:Button;

public function FileUpload(file:FileReference,url:String)
{
super();
//初始化参数
_file = file;
_uploadUrl = url;
_uploaded = false;
_uploading = false;
_bytesUploaded = 0;

//设置样式
setStyle(“backgroundColor”,”#eeeeee”);
setStyle(“paddingBottom”,”10″);
setStyle(“paddingTop”,”10″);
setStyle(“paddingLeft”,”10″);
verticalScrollPolicy = ScrollPolicy.OFF;

//添加事件监听
_file.addEventListener(Event.COMPLETE,OnUploadComplete);
_file.addEventListener(ProgressEvent.PROGRESS,OnUploadProgressChanged);
_file.addEventListener(HTTPStatusEvent.HTTP_STATUS,OnHttpError);
_file.addEventListener(IOErrorEvent.IO_ERROR,OnIOError);
_file.addEventListener(SecurityErrorEvent.SECURITY_ERROR,OnSecurityError);

//添加控件
var hbox:HBox = new HBox();

nameText = new Text();
nameText.text = _file.name + “-” + FormatSize(_file.size);

this.addChild(nameText);

bar = new ProgressBar();
bar.mode = ProgressBarMode.MANUAL;
bar.label = “已上传 0%”;
bar.width = 275;
hbox.addChild(bar);

button = new Button();
button.label = “移除”;

hbox.addChild(button);
button.addEventListener(MouseEvent.CLICK,OnRemoveButtonClicked);
this.addChild(hbox);
}

private function OnRemoveButtonClicked(event:Event):void
{
if(_uploading)
_file.cancel();
this.dispatchEvent(new FileUploadEvent(this,”FileRemoved”));
}

private function OnUploadComplete(event:Event):void
{
_uploading = false;
_uploaded = true;
this.dispatchEvent(new FileUploadEvent(this,”UploadComplete”));
}

private function OnHttpError(event:HTTPStatusEvent):void
{
this.dispatchEvent(event);
}

private function OnIOError(event:IOErrorEvent):void
{
this.dispatchEvent(event);
}

private function OnSecurityError(event:SecurityErrorEvent):void{
this.dispatchEvent(event);
}

// 处理文件上传进度
private function OnUploadProgressChanged(event:ProgressEvent):void
{
var bytesUploaded:uint = event.bytesLoaded – _bytesUploaded;
_bytesUploaded = event.bytesLoaded;
bar.setProgress(event.bytesLoaded,event.bytesTotal);
bar.label = “已上传 ” + FormatPercent(bar.percentComplete) + “%”;
this.dispatchEvent(new FileUploadProgressChangedEvent(this,bytesUploaded,”UploadProgressChanged”));
}

public function get IsUploading():Boolean{
return _uploading;
}

public function get IsUploaded():Boolean{
return _uploaded;
}

public function get BytesUploaded():uint{
return _bytesUploaded;
}

public function get UploadUrl():String{
return _uploadUrl;
}

public function set UploadUrl(uploadUrl:String):void{
_uploadUrl = uploadUrl;
}

public function get FileSize():uint
{
var size:uint = 0;
try{
size = _file.size;
}
catch (err:Error) {
size = 0;
}
return size;
}

public function Upload():void{
_uploading = true;
_bytesUploaded = 0;
_file.upload(new URLRequest(_uploadUrl));
}

public function CancelUpload():void{
_uploading = false;
_file.cancel();
}

//格式化文件大小
public static function FormatSize(size:uint):String{
if(size < 1024)
return PadSize(int(size*100)/100) + ” bytes”;
if(size < 1048576)
return PadSize(int((size / 1024)*100)/100) + “KB”;
if(size < 1073741824)
return PadSize(int((size / 1048576)*100)/100) + “MB”;
return PadSize(int((size / 1073741824)*100)/100) + “GB”;
}

public static function FormatPercent(percent:Number):String{
percent = int(percent);
return String(percent);
}

public static function PadSize(size:Number):String{
var temp:String = String(size);
var index:int = temp.lastIndexOf(“.”);
if(index == -1)
return temp + “.00″;
else if(index == temp.length – 2)
return temp + “0″;
else
return temp;
}
}
}

自定义组件事件
package components
{
import flash.events.Event;

public class FileUploadEvent extends Event
{
private var _sender:Object;

public function FileUploadEvent(sender:Object,type:String,bubbles:Boolean=false,cancelable:Boolean=false)
{
super(type,bubbles,cancelable);
_sender = sender;
}

public function get Sender():Object
{
return _sender;
}
}
}

package components
{
public class FileUploadProgressChangedEvent extends FileUploadEvent
{
private var _bytesUploaded:uint;
public function FileUploadProgressChangedEvent(sender:Object,bytesUploaded:uint,type:String,bubbles:Boolean=false,cancelable:Boolean=false)
{
super(sender,type,bubbles,cancelable);
_bytesUploaded = bytesUploaded;
}

public function get BytesUploaded():Object
{
return _bytesUploaded;
}
}
}