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熟悉可以指示显示上载源的三种数据，分别如下所示
         %1 当前加载字节数；         %2 总字节数。         %3 已加载百分比。         %% 相当于“%”。同时progressBar的mode可以指定其进度触发方式，可以为event（参见上文）或者ma'nual（参见：http://www.oschina.net/code/snippet_70229_1642）等。
其他介绍参见http://www.tutorialspoint.com/flex/flex_progressbar_control.htm