Flex中使用FileReference类多文件上传

请查看示例。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="vertical" horizontalAlign="left" fontSize="12"
    initialize="init()"
    viewSourceURL="srcview/index.html">
   <mx:NumberFormatter id="filesizeFormatter" useThousandsSeparator="true"/>
   <mx:Script>
        <![CDATA[
           import mx.events.CollectionEvent;
           import mx.formatters.NumberFormatter;
           import mx.formatters.CurrencyFormatter;
          import mx.collections.ArrayCollection;
            import mx.controls.Alert;
           private var fileRefs: FileReferenceList = new FileReferenceList();
           //这个地址是我测试用的服务器地址
           private var urlrequest: URLRequest = new URLRequest("http://localhost:8080/abc/UploadFile");
          [Bindable]
           private var selectedFiles: ArrayCollection = new ArrayCollection([]);
            private var singleThreadFiles: Array = [];
            [Bindable]
            private var useSingleThread: Boolean = true;
           private function init(): void
           {
               Security.allowDomain("*");
               fileRefs.addEventListener(Event.SELECT, fileSelectHandler);
              fileRefs.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
              fileRefs.addEventListener(Event.COMPLETE, completeHandler);
              addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);   
           }
           private function selectFile(): void
           {
              fileRefs.browse([new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png"),
                                      new FileFilter("所有文件(*.*)", "*.*")
                           ]);
           }
          private function fileSelectHandler(event: Event): void
           {
               for each (var f: FileReference in fileRefs.fileList)
               {
                   selectedFiles.addItem(f);
               }
            }
            private function uploadFile(): void
            {               
               for each (var f: FileReference in selectedFiles)
                {           
                   try
                   {
                      f.upload(urlrequest);
                   }
                   catch (e: Error)
                   {
                       Alert.show(e.message);
                    }
                }               
           }
           private function singleThreadUploadFile(): void
           {
               //FIFO：逐个从列表中取出，进行同步上传
               if (singleThreadFiles.length > 0)
               {
                   var f: FileReference = singleThreadFiles.pop() as FileReference;
                   f.addEventListener(Event.COMPLETE, doSingleUploadFileComplete);
                   f.upload(urlrequest);
                }
          }
            private function doSingleUploadFileComplete(event: Event): void
           {
               var f: FileReference = event.target as FileReference;
               f.removeEventListener(Event.COMPLETE, doSingleUploadFileComplete);
               singleThreadUploadFile();
           }
          private function ioErrorHandler(e:IOErrorEvent): void
           {
              Alert.show(e.text);
           }
           private function completeHandler(e: Event): void
            {
                img.source = e.target.data;
            }
            private function showImage(e: Event): void
            {               
                var f: FileReference = (e.target as DataGrid).selectedItem as FileReference;
                f.addEventListener(Event.COMPLETE, completeHandler);
                //f.load();
           
            }
            public function removeFile(f: FileReference): void
            {
                var index: int = selectedFiles.getItemIndex(f);
                if (index != -1)
                    selectedFiles.removeItemAt(index);
            }
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:HBox width="100%">
            <mx:Button id="selectFileButton" label="浏览" click="selectFile()"/>
            <mx:Box width="100%" horizontalAlign="right">
                <mx:Button click="selectedFiles.removeAll();" label="清空"/>
            </mx:Box>
        </mx:HBox>
        <mx:DataGrid id="files" dataProvider="{selectedFiles}" change="showImage(event)">
            <mx:columns>
                <mx:DataGridColumn width="150" headerText="文件名" dataField="name" />
                <mx:DataGridColumn headerText="大小(字节)" dataField="size">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Label text="{outerDocument.filesizeFormatter.format(data.size)}" textAlign="right"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="上传进度" width="300">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox fontSize="10" fontWeight="normal" fontThickness="1">
                                <mx:Script>
                                    <![CDATA[
                                        import flash.profiler.showRedrawRegions;
                                        import mx.controls.Alert;
                                         import mx.controls.ProgressBar;
                                         private function initProgressBar(event: Event): void
                                         {
                                            //使progressbar与file关联，从而产生进度条
                                            var pb: ProgressBar = event.target as ProgressBar;
                                            pb.label = "%3%%";
                                             pb.setProgress(0, 100);
                                             var f: FileReference = data as FileReference;
                                             //使用闭包方法，更新进度条
                                             f.addEventListener(ProgressEvent.PROGRESS,
                                                 function(event: ProgressEvent): void
                                                 {
                                                     pb.setProgress(event.bytesLoaded, event.bytesTotal);
                                                 }
                                            );
                                            f.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,
                                                function (event: DataEvent): void
                                                {
                                                    //服务器端一定要返回数据，否则，这个方法就不起作用了
                                                    pb.label = event.data;
                                                }
                                            );                                           
                                         }
                                    ]]>
                                </mx:Script>
                                <mx:ProgressBar verticalCenter="true" width="100%" paddingLeft="5" paddingRight="5"
                                    maximum="100" minimum="0" labelPlacement="center" mode="manual"
                                    label="%3%%" textAlign="left"
                                    creationComplete="initProgressBar(event)"/>
                                <mx:LinkButton label="Cancel">
                                    <mx:click>
                                        <![CDATA[
                                            var f: FileReference = data as FileReference;
                                            f.cancel();
                                        ]]>
                                    </mx:click>
                                </mx:LinkButton>
                                <mx:LinkButton label="Delete">
                                    <mx:click>
                                        <![CDATA[
                                            var f: FileReference = data as FileReference;
                                            outerDocument.removeFile(f);
                                        ]]>
                                    </mx:click>
                                </mx:LinkButton>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
    <mx:HBox>
        <mx:Button label="上传">
            <mx:click>
                <![CDATA[
                    if (useSingleThread)
                    {
                        //逐个上传
                       singleThreadFiles = selectedFiles.toArray().concat();
                        singleThreadFiles.reverse();
                        singleThreadUploadFile();
                    }
                    else
                    {
                        //多个文件同时上传
                        uploadFile();
                    }
                ]]>
            </mx:click>
        </mx:Button>
        <mx:CheckBox id="checkboxSingleThread" label="同时上传多个文件" selected="{!useSingleThread}"
            change="useSingleThread = !checkboxSingleThread.selected"/>
    </mx:HBox>
    <mx:Image id="img" width="400" height="300"/>
</mx:Application>