在Web应用中上传文件是比较常见需求在这里通过个实际应用向大家介绍下在Flex下如何进行多文件上传并在上传文件同时提供些自定义描述信息以便数据逻辑处理

　　功能需求　　

　　首先通过以下界面了解下需求:



　　主要功能包括:

　　1)允许添加多个上传文件

　　2)自定义文件标题

　　3)可以对没上传或正在上传文件删除

　　4)上传过程把窗体隐藏在后台不影响用户其他操作(这个就很简单把窗体隐藏起来在主界面显示个上进工作按钮就可以了需要时候再点击下查看进度)

　　定义文件上下传类

packageCodes
{
　　importHFSoftFx.HFSoftCoreFun;
　　
　　importflash.events.DataEvent;
　　importflash.events.ProgressEvent;
　　importflash.net.FileReference;
　　importflash.net.URLRequest;
　　
　　publicdynamicUploadFile
　　{
　　　　publicvarDEFAULT:=0;
　　　　publicvarLOADING:=1;
　　　　publicvarCOMPLETE:=2;
　　　　publicfunctionUploadFile
　　　　{
　　　　}
　　　　privatevarmState:=DEFAULT;
　　　　publicfunctiongetState:
　　　　{
　　　　　　mState;
　　　　}
　　　　privatevarmName:String;
　　　　publicfunctiongetName:String
　　　　{
　　　　　　mName;
　　　　}
　　　　publicfunction　Name(value:String):void
　　　　{
　　　　　　mName=value;
　　　　}
　　　　
　　　　privatevarmSize:;
　　　　publicfunctiongetSize:
　　　　{
　　　　　　mSize;
　　　　}
　　　　publicfunctionSize(value:):void
　　　　{
　　　　　　mSize=value;
　　　　}
　　　　privatevarmLoadSize:;
　　　　publicfunctiongetLoadSize:
　　　　{
　　　　　　mLoadSize;
　　　　}
　　　　publicfunctionLoadSize(value:):void{
　　　　　　mLoadSize=value;
　　　　}
　　　　
　　　　privatevarmFileRef:FileReference;
　　　　publicfunctiongetFileRef:FileReference
　　　　{
　　　　　　mFileRef;
　　　　}
　　　　publicfunctionFileRef(value:FileReference):void
　　　　{
　　　　　　mFileRef=value;
　　　　}
　　　　publicfunctionUpload(request:URLRequest,complete:Function=null,
　　　　progress:Function=null):void{
　　　　　　FileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,
　　　　　　function(event:DataEvent){
　　　　　　　　varstr:String=　event.data.substr(1,event.data.length-1);
　　　　　　　　varx:XML=XML(str);
　　　　　　　　(x.Exception!=''&&x.Exception!=null)
　　　　　　　　{
　　　　　　　　　　HFSoftCoreFun.AlertError(x.Exception);
　　　　　　　　}
　　　　　　　　
　　　　　　　　{
　　　　　　　　　　mState=COMPLETE;
　　　　　　　　　　(complete!=null)
　　　　　　　　　　　　complete;
　　　　　　　　}
　　　　　　　　　　
　　　　　　});
　　　　　　FileRef.addEventListener(ProgressEvent.PROGRESS
　　　　　　　　,function(event:ProgressEvent){
　　　　　　　　　　LoadSize=event.sLoaded;
　　　　　　　　　　Size=event.sTotal;
　　　　　　　　　　(progress!=null)
　　　　　　　　　　　　progress;
　　　　　　　　　　
　　　　　　　　});
　　　　　　mState=LOADING;
　　　　　　FileRef.upload(request);
　　　　　　
　　　　}
　　}
}

　　类并不复杂只是定义了些简单成员为什么要把类定义成动态呢主要是为了方便扩展些属性成员

　　这个类主要思路方法就是

　　　　publicfunctionUpload(request:URLRequest,complete:Function=null,
　　　　progress:Function=null):void{
　　　　　　FileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,
　　　　　　function(event:DataEvent){
　　　　　　　　varstr:String=　event.data.substr(1,event.data.length-1);
　　　　　　　　varx:XML=XML(str);
　　　　　　　　(x.Exception!=''&&x.Exception!=null)
　　　　　　　　{
　　　　　　　　　　HFSoftCoreFun.AlertError(x.Exception);
　　　　　　　　}
　　　　　　　　
　　　　　　　　{
　　　　　　　　　　mState=COMPLETE;
　　　　　　　　　　(complete!=null)
　　　　　　　　　　　　complete;
　　　　　　　　}
　　　　　　　　　　
　　　　　　});
　　　　　　FileRef.addEventListener(ProgressEvent.PROGRESS
　　　　　　　　,function(event:ProgressEvent){
　　　　　　　　　　LoadSize=event.sLoaded;
　　　　　　　　　　Size=event.sTotal;
　　　　　　　　　　(progress!=null)
　　　　　　　　　　　　progress;
　　　　　　　　　　
　　　　　　　　});
　　　　　　mState=LOADING;
　　　　　　FileRef.upload(request);
　　　　　　
　　　　}

　　参数request是定义接收文件URLRequest

　　参数complete和progress分别是上传成功和上传进度回调思路方法

　　窗体代码

<?xmlversion="1.0"encoding="utf-8"?>
<mx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"width="628"height="300"title="上传文件"showCloseButton="true"xmlns:net="flash.net.*">
　　<mx:close>
　　　　<![CDATA[
　　　　OnWorkingChange;
　　　　　　PopUpManager.removePopUp(this);
　　　　　　
　　　　]]>
　　</mx:close>
　　<mx:Canvaswidth="100%"height="100%">
　　<mx:VBoxleft="10"right="20"verticalAlign="middle"horizontalAlign="center">
　　<mx:Repeater　　dataProvider="{mUploadFiles}"id="rp"width="100%"height="100%">
　　　　<mx:HBoxdata="{rp.currentItem}"　verticalAlign="middle"height="26"horizontalAlign="center">
　　　　<mx:render>
　　　　　　<![CDATA[
　　　　　　　　varhb:HBox=HBox(event.target);
　　　　　　　　varpb:ProgressBar=ProgressBar(hb.getChildByName("pb1"));
　　　　　　　　varuf:UploadFile=UploadFile(hb.data);
　　　　　　　　pb.Progress(uf.LoadSize,uf.Size);　　
　　　　　　]]>
　　　　</mx:render>
　　　　<mx:Button　visible="{rp.currentItem.State!=UploadFile.COMPLETE}"data="{rp.currentIndex}"icon="@Embed(source='http://www.cnblogs.com/Imanges/delete16.png')"width="28">
　　　　　　　　<mx:click>
　　　　　　　　　　<![CDATA[
　　　　　　　　　　　　DeleteUploadItem((event.target.data));
　　　　　　　　　　]]>
　　　　　　　　</mx:click>
　　　　　　</mx:Button>
　　　　　　<mx:Label　width="180"text="{rp.currentItem.Name}"/>
　　　　　　<mx:TextInputdata="{rp.currentItem}"text="{rp.currentItem.Title}"width="206">
　　　　　　　　<mx:change>
　　　　　　　　　　<![CDATA[
　　　　　　　　　　　　event.target.data.Title=event.target.text;
　　　　　　　　　　]]>
　　　　　　　　</mx:change>
　　　　　　</mx:TextInput>
　　　　　　<mx:ProgressBar　id="pb1"　labelPlacement="center"　mode="manual"　width="106"fontWeight="normal"/>
　　　　</mx:HBox>
　　　　<mx:HRulewidth="100%"/>
　　</mx:Repeater>
　　</mx:VBox>
　　</mx:Canvas>
　　<mx:ControlBarhorizontalAlign="right"verticalAlign="middle">
　　　　<mx:Buttonlabel="上传">
　　　　　　<mx:click>
　　　　　　　　<![CDATA[
　　　　　　　　　　Upload_File;
　　　　　　　　]]>
　　　　　　</mx:click>
　　　　</mx:Button>
　　　　<mx:Buttonlabel="确定">
　　　　　　<mx:click>
　　　　　　　　<![CDATA[
　　　　　　　　OnWorkingChange;
　　　　　　　　　　PopUpManager.removePopUp(this);
　　　　　　　　]]>
　　　　　　</mx:click>
　　　　</mx:Button>
　　</mx:ControlBar>
　　<mx:initialize>
　　　　<![CDATA[
　　　　　　My=this;
　　　　]]>
　　</mx:initialize>
　　　　<mx:Script>
　　　　<![CDATA[
　　　　　　importCodes.PopUpEffect;
　　　　　　importmx.core.IFlexDisplayObject;
　　　　　　importmx.managers.PopUpManager;
　　　　　　importmx.controls.ProgressBar;
　　　　　　importCodes.UploadFile;
　　　　　　importCodes.SysConfig;
　　　　　　importflash.net.URLRequest;
　　　　　　importCodes.Untity;
　　　　　　importflash.net.URLVariables;
　　　　　　importflash.net.FileReference;
　　　　　　importHFSoftFx.HFSoftCoreFun;
　　　　　　
　　　　　　privatevarMy:IFlexDisplayObject;
　　　　　　[Bindable]
　　　　　　privatevarmUploadFiles:Array=Array;
　　　　　　privatevarervalId:u;
　　　　　　publicvarWorkingChange:Function;
　　　　　　privatefunctionOnWorkingChange:void{
　　　　　　　　(WorkingChange!=null)
　　　　　　　　　　WorkingChange;
　　　　　　}
　　　　　　publicfunctiongetUploadFiles:Array
　　　　　　{
　　　　　　　　mUploadFiles;
　　　　　　}
　　　　　　privatefunctionDeleteUploadItem(index:)
　　　　　　{
　　　　　　　　varitem:UploadFile　=UploadFile(mUploadFiles[index]);
　　　　　　　　item.FileRef.cancel;
　　　　　　　　mUploadFiles.splice(index,1);
　　　　　　　　OnWorkingChange;
　　　　　　　　rp.executeBindings(true);
　　　　　　　　(mUploadFiles.length0)
　　　　　　　　　　PopUpEffect.Hide(My);
　　　　　　　　　　
　　　　　　}
　　　　　　publicfunctionUpload_File:void{
　　　　　　　　
　　　　　　　　varitem:UploadFile　=UploadFile(mUploadFiles[0]);
　　　　　　　　varrequest:URLRequest=Untity.GetUploadFileRequest;
　　　　　　　　varvariables:URLVariables=　URLVariables;
　　　　　　　　variables.Title=item.Title;
　　　　　　　　variables.FolderID=item.FolderID;
　　　　　　　　request.data=variables;
　　　　　　　　item.Upload(request,function{
　　　　　　　　　　
　　　　　　　　　　DeleteUploadItem(0);
　　　　　　　　　　(mUploadFiles.length>0)
　　　　　　　　　　ervalId=flash.utils.Interval(function{
　　　　　　　　　　　　　　flash.utils.clearInterval(ervalId);
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　Upload_File;
　　　　　　　　　　　　},500,null);
　　　　　　　　},function{
　　　　　　　　　　rp.executeBindings(true);
　　　　　　　　});
　　　　　　}
　　　　　　publicfunctionAddItem(files:FileReferenceList,folderid:):void{
　　　　　　　　varitem:UploadFile;
　　　　　　　　var　fr:FileReference;
　　　　　　　　for(vari:u=0;i<files.fileList.length;i){
　　　　　　　　　　fr=FileReference(files.fileList[i]);
　　　　　　　　　　　(fr.size>SysConfig.ImageMaxSize)
　　　　　　　　　　　{
　　　　　　　　　　　　　HFSoftCoreFun.AlertError(fr.name+"文件大于"+(SysConfig.ResourceFileMaxSize/1024)+"(KB)");
　　　　　　　　　　　　　;
　　　　　　　　　　　}
　　　　　　　　　　　item=UploadFile;
　　　　　　　　　　item.FileRef=fr;
　　　　　　　　　　item.FolderID=folderid;
　　　　　　　　　　item.Title=fr.name;
　　　　　　　　　　item.Name=fr.name;
　　　　　　　　　　item.Size=fr.size;
　　　　　　　　　　mUploadFiles.push(item);
　　　　　　　　　
　　　　　　　　}
　　　　　　　　rp.executeBindings(true);
　　　　　　}
　　　　]]>
　　</mx:Script>
　　
</mx:TitleWindow>

　　窗体有两个主要思路方法:

　　通过FileReferenceList把选择文件添加到窗体列中

　　　　　　publicfunctionAddItem(files:FileReferenceList,folderid:):void{
　　　　　　　　varitem:UploadFile;
　　　　　　　　var　fr:FileReference;
　　　　　　　　for(vari:u=0;i<files.fileList.length;i){
　　　　　　　　　　fr=FileReference(files.fileList[i]);
　　　　　　　　　　　(fr.size>SysConfig.ImageMaxSize)
　　　　　　　　　　　{
　　　　　　　　　　　　　HFSoftCoreFun.AlertError(fr.name+"文件大于"+(SysConfig.ResourceFileMaxSize/1024)+"(KB)");
　　　　　　　　　　　　　;
　　　　　　　　　　　}
　　　　　　　　　　　item=UploadFile;
　　　　　　　　　　item.FileRef=fr;
　　　　　　　　　　item.FolderID=folderid;
　　　　　　　　　　item.Title=fr.name;
　　　　　　　　　　item.Name=fr.name;
　　　　　　　　　　item.Size=fr.size;
　　　　　　　　　　mUploadFiles.push(item);
　　　　　　　　　
　　　　　　　　}
　　　　　　　　rp.executeBindings(true);
　　　　　　}

　　对列表文件进行上传更新窗体内容

　　　　　　publicfunctionUpload_File:void{
　　　　　　　　
　　　　　　　　varitem:UploadFile　=UploadFile(mUploadFiles[0]);
　　　　　　　　varrequest:URLRequest=Untity.GetUploadFileRequest;
　　　　　　　　varvariables:URLVariables=　URLVariables;
　　　　　　　　variables.Title=item.Title;
　　　　　　　　variables.FolderID=item.FolderID;
　　　　　　　　request.data=variables;
　　　　　　　　item.Upload(request,function{
　　　　　　　　　　
　　　　　　　　　　DeleteUploadItem(0);
　　　　　　　　　　(mUploadFiles.length>0)
　　　　　　　　　　ervalId=flash.utils.Interval(function{
　　　　　　　　　　　　　　flash.utils.clearInterval(ervalId);
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　Upload_File;
　　　　　　　　　　　　},500,null);
　　　　　　　　},function{
　　　　　　　　　　rp.executeBindings(true);
　　　　　　　　});
　　　　　　}

　　上传思路方法很简单就是从0索引开始上传把上传完成文件移走继续上传下个直到列表上传完成如果现在继添加上传文件也会排到队列后等待上传

　　不过实际情况你可以同时上传多个只要对区别UploadFileUpload即可

　　服务端代码

　　对于采用什么样服务端来完成文件处理就根据自己喜好了我用是自己基于C#编写http xml服务

　　[ActionMapper]
　　publicFileUpload:Users.WebService.ActionBase
　　{
　　　　publicTitle
　　　　{
　　　　　　get;
　　　　　　;
　　　　}
　　　　publicNClay.FileFile
　　　　{
　　　　　　get;
　　　　　　;
　　　　}
　　　　publicFolderID
　　　　{
　　　　　　get;
　　　　　　;
　　　　}
　　　　protectedoverridevoidOnExecute
　　　　{
　　　　　　base.OnExecute;
　　　　　　Expressionexp=Folder.folderIDFolderID&Folder.owner!=Loginer.UserID;
　　　　　　(Folder.Count(exp)>0)
　　　　　　　　throwException("无权在其他人文件夹中添加文件!");
　　　　　　filename=Guid.NewGuid.+.IO.Path.GetExtension(File.Name);
　　　　　　Files.Filef=File;
　　　　　　f.Owner=Loginer.UserID;
　　　　　　f.OwnerName=Loginer.UserName;
　　　　　　f.FileName=filename;
　　　　　　f.CreateDate=DateTime.Now;
　　　　　　f.Title=Title;
　　　　　　f.FolderID=FolderID;
　　　　　　f.DownloadName=.IO.Path.GetFileNameWithoutExtension(Title)+.IO.Path.GetExtension(File.Name);
　　　　　　f.Save;
　　　　　　FileHandler.SaveFile(Loginer.UserName,f.FileName,File);
　　　　}
　　　　protectedoverrideboolSigninAccess
　　　　{
　　　　　　get
　　　　　　{
　　　　　　　　true;
　　　　　　}
　　　　}
　　}



　　实际应用效果图