技术开发 频道

Flex实现多文件上传之一:前台部分

下面说一下主要的代码:

    1)FileReferenceList的浏览方法,这个和FileReference的browse一样,只是这里的弹出窗口中可以选择多个文件

//选择多个文件
private function selectHandler(event:Event):void{
for(var i:int=0;i<frlist.fileList.length;i++){
   var f:FileReference = FileReference(frlist.fileList[i]); 
  
   var obj:Object= new Object();
   obj.fileName = f.name;
   obj.fileSize = f.size;
   obj.fileType = f.type;
   obj.fileRefrence = f;
   selectedFiles.addItem(obj);
}
 

    frlist是FileReferenceList变量,它的fileList是个FileReference列表,包括了每个选择的文件信息,如名称、大小、类型

    selectedFiles是个ArrayCollection对象,用来保存已经选择的文件,并将这个作为DataGrid的dataProvider

    为了能让DataGrid中的进度条能监控上传进度,将FileReference对象作为DataGrid每条数据的属性。在后面的代码中将看到。

2)上传按钮的事件的处理

//逐个上传文件
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(new URLRequest(uploadUrl));
}
}

前面定义selectedFiles就是为了能方便的处理

3)DataGrid列表的进度条一栏的itemRenderer定义


一个进度条,一个取消按钮,一个删除按钮

<mx:DataGridColumn width="130" headerText="状态">
<mx:itemRenderer>
  <mx:Component>
    <mx:HBox width="130" paddingLeft="2" horizontalGap="2">
     <mx:ProgressBar id="progress" width="100%" 
      minimum="0" maximum="100" source="{data.fileRefrence}" 
      labelPlacement="center" progress="progress.label='%3%%';"
      label="%3%%">
     </mx:ProgressBar>
     <mx:LinkButton width="20" toolTip="取消上传" click="cancel()"
      icon="{ButtonAssets.delIcon}">
      <mx:Script>
       <![CDATA[
        private function cancel():void{
         data.fileRefrence.cancel();
         progress.label = "已取消";
        }
       ]]>
      </mx:Script>
     </mx:LinkButton>
     <mx:LinkButton width="20" click="deleteItem(event)" 
      icon="{ButtonAssets.deleteIcon}" toolTip="从列表中删除">
      <mx:Script>
       <![CDATA[
        import com.nstar.base.controls.ButtonAssets;
        import mx.collections.ArrayCollection;
        import mx.controls.DataGrid;
       
        private function deleteItem(event:MouseEvent):void {
         var grid:Object = event.target.parent.parent.parent;
         var dp:ArrayCollection = ArrayCollection(grid.dataProvider);
         var index:int = dp.getItemIndex(data);
         dp.removeItemAt(index); 
         grid.parent.refresh();
        }
       ]]>
      </mx:Script>
     </mx:LinkButton>
    </mx:HBox>
  </mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

设置了Progress的source属性,用于监控文件上传的进度

source="{data.fileRefrence}" ,这里的fileRefrence就是在文件浏览时设置的。

 

 

0
相关文章