flex多文件带进度条上传

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"    layout="absolute" title="上传文件" color="#7dbded"
        width="609" height="460" baseColor="#E0ECFF" borderColor="#E0ECFF" backgroundColor="haloBlue" backgroundAlpha="0.1" contentBackgroundAlpha="0.1"
        borderVisible="true" dropShadowVisible="true"    
        showCloseButton="true" close="PopUpManager.removePopUp(this)"
         fontFamily="Arial" fontSize="14" fontWeight="bold" verticalAlign="top" initialize="init();">
  <fx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import mx.controls.ProgressBar;
      import mx.managers.PopUpManager;
        
      private var fileList:FileReferenceList = new FileReferenceList();  //多选文件的list
      private var urlRequest:URLRequest = new URLRequest("http://192.168.1.205:9218/productshowshow/upload");    //处理文件上传的servlet
      [Bindable]
      public var selectedFiles: ArrayCollection = new ArrayCollection([]);    //多选的文件分离成文件数组
      private var fileListSize:uint=1;
      /**
        * 初始化
        */
      public function init():void{
        fileList.addEventListener(Event.SELECT,fileSelectHandler);
      }
      /**
        *监听文件选择的处理函数
        */
      private function fileSelectHandler(event: Event): void
      {
        if(fileList.fileList.length>10){
          Alert.show("一次最多只能上传10个文件");
        }else{
          for(var i:int=0;i<fileList.fileList.length;i++){
            var f:FileReference = FileReference(fileList.fileList[i]);    
            var obj:Object= new Object();
            obj.fileName = f.name;
            obj.fileSize = f.size/1024;
            obj.fileType = f.type;
            obj.fileRefrence = f;
            fileListSize+=f.size;
            selectedFiles.addItem(obj);
          }
          if( fileListSize/(1024*1024)>100 ){
            selectedFiles.removeAll();
            Alert.show("文件总大小应小于100M");
          }
        }
//        for each (var file: FileReference in fileList.fileList)
//        {
//          selectedFiles.addItem(file);
//        }
      }
      /**
        * 点击"浏览"按钮-->选择文件
        */
      protected function selectFile():void
      {
        //浏览文件,因为是FileReferenceList所以可以多选. 并用FileFilter过滤文件类型.
        fileList.browse([new FileFilter("图片文件 (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png"),new FileFilter("所有文件 (*.*)","*.*")]);
      }
      /**
        * 逐个上传文件
        */
      private function uploadHandler(event:MouseEvent):void{
        var file:FileReference;
        for(var i:int = 0 ;i<selectedFiles.length;i++){
          file = FileReference(selectedFiles[i].fileRefrence);
          file.upload(urlRequest);
        }
      }
      /**
        * 上传一个文件,监听文件上传完成事件,递归调用.
        */
      private function doSingleUploadFile():void{
        if(selectedFiles.length>10){
          selectedFiles.removeAll();
          Alert.show("一次最多只能上传10个文件");
        }else if( fileListSize/(1024*1024)>100 ){
          selectedFiles.removeAll();
          Alert.show("文件总大小应小于100M");
        }else{
          if (fileList.fileList.length > 0){
            var f: FileReference = fileList.fileList.shift() as FileReference;
            f.addEventListener(Event.COMPLETE, doSingleUploadFileComplete);
            f.upload(urlRequest);
          }
        }
      }
      /**
        * 一个文件上传完成事件的处理函数,递归执行上传下一个文件.
        */
      private function doSingleUploadFileComplete(event: Event):void{
        var file: FileReference = event.target as FileReference;
        file.removeEventListener(Event.COMPLETE, doSingleUploadFileComplete);
        doSingleUploadFile();
      }
      public function removeFile(f: FileReference): void
      {
        var index: int = selectedFiles.getItemIndex(f);
        if (index != -1)
          selectedFiles.removeItemAt(index);
      }
        
    ]]>
  </fx:Script>
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>
  <mx:LinkButton x="10" y="23" textRollOverColor="purple" textSelectedColor="haloBlue"    label="选择本地文件" cornerRadius="7" fontFamily="中易宋体" fontSize="14" fontWeight="bold" fontStyle="normal" textDecoration="none" textAlign="center"
             click="selectFile()"/>
  <mx:DataGrid x="12" y="50" id="dg" width="587" height="291" color="#7dbded" contentBackgroundColor="#E0ECFF" baseColor="#E0ECFF"
        dataProvider="{selectedFiles}">
    <mx:columns>
      <mx:DataGridColumn headerText="文件名" dataField="fileName" width="150"/>
      <mx:DataGridColumn headerText="大小(kb)" dataField="fileSize" width="100"/>
      <mx:DataGridColumn headerText="类型" dataField="fileType" width="70"/>
      <mx:DataGridColumn headerText="上传状态" dataField=""    width="230">
        <mx:itemRenderer>
          <fx:Component>
            <mx:HBox width="130" paddingLeft="2" horizontalGap="2">
              <fx:Script>
                <![CDATA[
                  override public function set data(value:Object):void{
                    super.data = value;
                    data.fileRefrence.addEventListener(ProgressEvent.PROGRESS,progressHandler);
                    data.fileRefrence.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,fini);
                  }
                    
                  private function progressHandler(event:ProgressEvent):void{
//                    progress.setProgress(event.bytesLoaded,data.fileRefrence.size);
//                    Alert.show("hahah");
//                    progress.setProgress(event.bytesLoaded, event.bytesTotal);
                    var procent:uint=event.bytesLoaded/event.bytesTotal*100;
//                    progress.label=procent+"###";
//                    if(procent==100){
////                      progress.enabled=false;
//                      progress.label="完成啦";
//                    }
//                    data.fileRefrence.removeEventListener(ProgressEvent.PROGRESS,progressHandler);
                  }    
                    
                  public function fini(event: DataEvent):void{
                    progress.visible=true;
                    progress.label="完成";
                    data.fileRefrence.removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA,fini);
                  }
                ]]>
              </fx:Script>
              <mx:ProgressBar id="progress" width="80%"    
                      minimum="0" maximum="100" source="{data.fileRefrence}"
                      labelPlacement="center" ><!--进度条显示文字    source="{data.fileRefrence}"    progress="progress.label='%3%%';"    label="%3%%"    -->
              </mx:ProgressBar>
              <!-- 取消按钮    source="{data.fileRefrence}"
              <mx:LinkButton width="20" toolTip="取消上传" click="cancel()"
              label="取消" icon="@Embed('p_w_picpath/cancel.png')">
              <fx:Script>
              <![CDATA[
              private function cancel():void{
              data.fileRefrence.cancel();
              progress.label = "已取消";
              }
              ]]>
              </fx:Script>
              </mx:LinkButton>
              -->
        
              <!--
              <mx:LinkButton width="20" click="deleteItem(event)"    
                         toolTip="从列表中删除" icon="@Embed('p_w_picpath/delete.png')">
                <fx:Script>
                  <![CDATA[
                    import mx.collections.ArrayCollection;
                    
                    private function deleteItem(event:MouseEvent):void {
                        
                      var s:ArrayCollection= this.parentDocument.selectedFiles as ArrayCollection;    //取全局变量
                      var index:int=s.getItemIndex(data);
                      if (index != -1){
                        s.removeItemAt(index);
                      }
                    }
                  ]]>
                </fx:Script>
              </mx:LinkButton>
              -->
            </mx:HBox>
          </fx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>
    </mx:columns>
  </mx:DataGrid>
  <s:Button x="523" y="373" label="上传" id="btn_upload"    lineHeight="0"    
         click="doSingleUploadFile();" />
</mx:TitleWindow>