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