Flex progressBar在同一上传功能页面下多次上传中的使用
Flex progressBar为用户提供一个可视化进度提示，例如在上传文档或者下载文档时显示相关进度。progressBar除了可以手动设置相关进度（其mode为manual）外，还可以利用事件触发时时改变相关进度。在利用FileReference（或FileReferenceList）进行上传文档时，往往会使用progressBar来监听进度。通常这块使用一个弹出界面，当下次上传文档时，再创建该文档上传页面（这样即可以实现progressBar的初始化）。但如果该上传文档页面在整个应用生命期都存在的话，则多次上传情况下，除第一次进度条是从0开始到100%，其他此上传进度条开始时即为100%，原因是progressBar未进行初始化。而在mode为event情况下，progressBar似乎又不能手动初始化。下文代码展示一种折中做法，即：将每次文档传的进度始终保持在上传界面上，第二次上传时既展示前一次上传的文档（进度为100%），又展示新的待上传的文档（进度为0%，新增加的进度条，而不是利用先前的），但只对新增加的文档进行上传。示意如下图所示。
代码示意如下所示
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"><s:layout><s:BasicLayout/></s:layout><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.controls.Alert;import mx.managers.CursorManager;import mx.managers.PopUpManager;import org.osmf.layout.AbsoluteLayoutFacet;[Bindable]private var fileRef:FileReferenceList = new FileReferenceList();[Bindable]private var indexTAB:int = 0;//界面显示上传文件之用[Bindable]private var selectFiles:ArrayCollection = new ArrayCollection();[Bindable]private var classList:ArrayCollection = new ArrayCollection();//存储用户传输的属性列表信息[Bindable]private var attributeList:ArrayCollection = new ArrayCollection();private var fileCount:int = 0;private var count_upload:int = 0;private var selectedFolderid:String = null;private var docArray:Array = new Array();private function init():void{fileRef.addEventListener(Event.SELECT, selectHandler);}//浏览并选择本地文件private function browseAndUpload():void{docArray = new Array();fileRef = new FileReferenceList();fileRef.addEventListener(Event.SELECT, selectHandler);fileRef.browse(new Array());}//循环处理选中的每个文件private function selectHandler(event:Event):void{try{browseBtn.enabled = false;fileRef = FileReferenceList(event.target);fileCount = fileRef.fileList.length;var size:Number = 0;for each (var file:FileReference in fileRef.fileList){if (file.size == 0){//如果所选文件大小为0,提示并关闭上传界面Alert.show("你选择的文件不能上传，因为 " + file.name + " 文件内容为空");PopUpManager.removePopUp(this);return;}size += file.size;file.addEventListener(Event.COMPLETE, completeHandler);file.addEventListener(ProgressEvent.PROGRESS, progressHandler);file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);docArray.push(file);}var newArray:ArrayCollection = new ArrayCollection();if(selectFiles.length > 0){for(var i:int = 0 ; i < selectFiles.length;i++){newArray.addItem(selectFiles[i]);}}if(docArray.length > 0){for(var i:int = 0 ; i < docArray.length;i++){newArray.addItem(docArray[i]);}}selectFiles = newArray;}catch (err:Error){browseBtn.enabled = true;}}var proc:uint = 0;private function completeHandler(event:Event):void{var fr:FileReference = FileReference(event.target);if (--fileCount == 0){CursorManager.removeAllCursors(); //去除鼠标样式browseBtn.enabled = true;Alert.show("上传成功！");fileRef = new FileReferenceList();docArray = new Array();indexTAB = 1;indexTAB = 0;}}private function progressHandler(e:ProgressEvent):void{proc = e.bytesLoaded / e.bytesTotal * 100;if (proc == 100)count_upload++;if (count_upload == fileCount){CursorManager.setBusyCursor(); //将鼠标状态设成忙样式}}private function ioErrorHandler(event:Event):void{var file:FileReference = FileReference(event.target);Alert.show(file.name + " 上传失败!");}private function upLoad():void{CursorManager.setBusyCursor();for(var i:int = 0 ; i < docArray.length ; i++){FileReference(docArray[i]).load();}}]]></fx:Script><mx:Canvas><mx:TabNavigator id="tabN" selectedIndex="{indexTAB}"><mx:VBox label="lookup" width="500" height="500"></mx:VBox><mx:VBox label="upload" width="100%" height="100%"><mx:VBox><mx:DataGrid id="dg" dataProvider="{selectFiles}" width="100%" height="100%" editable="false" ><mx:columns><mx:DataGridColumn headerText="名称" dataField="name" textAlign="center" visible="true"></mx:DataGridColumn><mx:DataGridColumn headerText="大小" dataField="size" textAlign="right" headerStyleName="centered" visible="true"></mx:DataGridColumn><mx:DataGridColumn headerText="进度" dataField="" visible="true" headerStyleName="centered" width="300"><mx:itemRenderer><fx:Component><mx:HBox width="100%" height="100%" verticalAlign="middle" horizontalGap="0" paddingLeft="10" paddingRight="10" backgroundAlpha="0.0" horizontalScrollPolicy="off" verticalScrollPolicy="off"><mx:ProgressBar id="progressBarC" themeColor="#1C7BB8" visible="true"labelPlacement="center" source="{data}"label="当前进度: %3%%" direction="right"mode="event" width="100%" height="12" /></mx:HBox></fx:Component></mx:itemRenderer></mx:DataGridColumn></mx:columns></mx:DataGrid><mx:ControlBar id="controlbar1" width="100%" height="10%"><mx:VBox width="100%" id="hbox1" horizontalAlign="center"><mx:HBox><mx:Button id="browseBtn" label="浏览" click="browseAndUpload()"/><mx:Text id="message"/><mx:Button id="uploadBtn" label="上传" click="upLoad()"/></mx:HBox></mx:VBox></mx:ControlBar></mx:VBox></mx:VBox></mx:TabNavigator></mx:Canvas></s:Application>
progressBar的label熟悉可以指示显示上载源的三种数据，分别如下所示
同时progressBar的mode可以指定其进度触发方式，可以为event（参见上文）或者ma'nual（参见：http://www.oschina.net/code/snippet_70229_1642）等。
其他介绍参见http://www.tutorialspoint.com/flex/flex_progressbar_control.htm