flex多文件上传带进度条

<?xml version="1.0" encoding="utf-8"?>
<!--Application实例完成后就执行initApp()-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" applicationComplete="initApp()">
<mx:Script>
   <![CDATA[
    import mx.collections.ArrayCollection;
    import flash.events.MouseEvent;
    import flash.events.ProgressEvent;
    import mx.controls.Alert;
    public var test:int;
   
    public var arr:ArrayCollection= new ArrayCollection();
   
    public var arr2:ArrayCollection = new ArrayCollection();//存放为被上传的东西,与显示无关
    var myFileRef:FileReferenceList = new FileReferenceList();
   
    public var array:Array=new Array();//用户可能分几次选择,将每次选择的内容放入数组中,点击上传后一起上传
   
    var urlRequest:URLRequest = new URLRequest("http://localhost/upload.php");
    private function initApp():void{
     myFileRef.addEventListener(Event.SELECT,selectHandler);//监听上传对话框确定按钮
     //myFileRef.addEventListener(Event.CANCEL,cancelHandler);//监听上传对话框取消按钮
    }
    private function selectHandler(event:Event):void {//上传框确认按钮按下
     for(var i:int=0;i<myFileRef.fileList.length;i++){
      var f:FileReference = FileReference(myFileRef.fileList[i]); 
      var obj:Object = new Object();
      obj.fileRefrence = f;//与进度条绑定
      obj.fileName =f.name;
      obj.fileSize = f.size;
      obj.type = f.type;
      arr.addItem(obj);
           arr2.addItem(obj);
     }
     dataGrid.dataProvider=arr;
    }
    private function uploadCompleteHandler(event:Event):void {//删除已上传文件在数组中的信息
     for each(var item in arr2)
     {
      if(item.fileRefrence==event.currentTarget)
      {
       arr2.source.indexOf(item);//找到已经上传的文件,返回下标
       var index:Number = arr2.source.indexOf(item);
       arr2.removeItemAt(index);//删除已经上传的文件
      }
     } 
         }
    private function select(event:MouseEvent):void{//浏览按钮按下
     myFileRef.browse();
    }
    //通过urlrequest对象创建一个与服务端的连接,然后直接调用fielreference类的upload()方法
    private function onUpload(event:Event):void{
     for(var i:int=0;i<arr2.length;i++){
      var f:FileReference = FileReference(arr2[i]['fileRefrence']); 
           f.upload(urlRequest);
           f.addEventListener(Event.COMPLETE, uploadCompleteHandler);
     }
    }
    private function onCancel():void{
     arr.removeAll();
     arr2.removeAll();
     dataGrid.dataProvider=arr;
    }
   
   
   ]]>
</mx:Script>
<mx:Panel width="600" height="450" title="Upload" horizontalAlign="center" verticalAlign="middle">
   <mx:DataGrid width="536" height="300" id="dataGrid">
    <mx:columns>
     <mx:DataGridColumn headerText="文件名称" dataField="fileName" fontSize="12"/>
     <mx:DataGridColumn headerText="文件大小" dataField="fileSize" fontSize="12"/>
     <mx:DataGridColumn headerText="文件类型" dataField="type" fontSize="12"/>
     <mx:DataGridColumn width="130" headerText="状态" fontSize="12">
      <mx:itemRenderer>
       <mx:Component>
         <mx:HBox width="300" paddingLeft="2" horizontalGap="2" verticalAlign="middle">
          <mx:ProgressBar id="progress" width="100%" 
           minimum="0" maximum="100" source="{data.fileRefrence}" 
           labelPlacement="center"
           label="%3%%">
          </mx:ProgressBar>
          <mx:LinkButton width="15" label="取消" click="cancel()" icon="@Embed('_.png')">
          <mx:Script>
             <![CDATA[
              private function cancel():void{
               data.fileRefrence.cancel();
                  progress.label = "已取消";
              }
             ]]>
          </mx:Script>
          </mx:LinkButton>
          <mx:LinkButton width="13" label="删除" click="deleteItem(event)" icon="@Embed('x.png')" >
          <mx:Script>
             <![CDATA[
               import mx.collections.ArrayCollection;
               import mx.controls.DataGrid;
               import mx.controls.Alert;
               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);
                 outerDocument.arr2.removeItemAt(index);
                 dp.removeItemAt(index); 
                 grid.parent.refresh();
               }
             ]]>
          </mx:Script>
          </mx:LinkButton>
         </mx:HBox>
       </mx:Component>
      </mx:itemRenderer>
     </mx:DataGridColumn>
    </mx:columns>
   </mx:DataGrid>
   <mx:Canvas width="424" height="45">
    <mx:Button label="浏览……" id="browse" right="118" click="select(event)" height="23" y="13" width="67" fontSize="12"/>
    <mx:Button label="上传" id="up" right="62" click="onUpload(event)" y="12" fontSize="12"/>
    <mx:Button label="取消" id="cancel" right="6" y="12" fontSize="12" click="onCancel()"/> 
   </mx:Canvas>
</mx:Panel>
</mx:Application>

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值