Flex上傳多文件，並實現預覽的效果

<?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" width="645" height="600"  xmlns:net="flash.net.*" initialize="initEvent(event)" creationComplete="creationCompleteEvent(event)">
	<fx:Declarations>
		<!-- 將非可視元素（例如服務、值對象）放在此處 -->
		<net:FileReferenceList id="fileReferenceList"
							   select="fileReference_select(event);"/>
		<mx:NumberFormatter id="filesizeFormatter" useThousandsSeparator="true"/> 
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import mx.formatters.CurrencyFormatter;
		import mx.formatters.NumberFormatter;
		import mx.controls.ProgressBar;
		
		private var FileDesc:String="Images"; 
		private var Extension:String="*.jpg;*gif;*.png"; 
		private var Url:String="http://localhost:8666/Ashx/FileHandler.ashx";
		private var FileFolder:String=""; 
			
		private var urlrequest: URLRequest = new URLRequest(Url);  
		private var singleThreadFiles: Array = [];  
			
		[Bindable]
		private var arrColl:ArrayCollection = new ArrayCollection();
		
		private function initEvent(e:Event):void
		{
			var sdsd:String="abc";
			//var aa:Boolean=typeof(root.loaderInfo.parameters["fileDesc"])=="undefined";
		}
			
		private function creationCompleteEvent(e:Event):void
		{
			//var aa:Boolean=typeof(LoaderInfo(this.root.loaderInfo).parameters["fileDesc"])=="undefined";
		}
			
		private function btn_click(evt:MouseEvent):void
		{
			if(typeof(root.loaderInfo.parameters["fileDesc"])!="undefined")
			{
				FileDesc=root.loaderInfo.parameters["fileDesc"];
			}
			if(typeof(root.loaderInfo.parameters["Extension"])!="undefined")
			{
				Extension=root.loaderInfo.parameters["Extension"];
			}
			var arr:Array = [];
			arr.push(new FileFilter(FileDesc, Extension));

			fileReferenceList.browse(arr);
		}
		
		private function fileReference_select(evt:Event):void
		{
			for (var i:int = 0; i < fileReferenceList.fileList.length; i++)
			{
				fileReferenceList.fileList[i].addEventListener(Event.COMPLETE, completeLoadFile);
				fileReferenceList.fileList[i].load();
			}
		}
		
		private function completeLoadFile(e:Event):void
		{
			var loader:Loader = new Loader();
			var file:FileReference = e.target as FileReference;
			if(file.size>1024*1024*4)
			{
				Alert.show("文件不能超過4M.","錯誤");
				return;
			}
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function():void
			{
				var bmp:Bitmap=loader.content as Bitmap;
				var bmd:BitmapData;
				if((bmp.width>bmp.height||bmp.width==bmp.height)&&bmp.width>800)
				{
					var rateW:Number=800/bmp.width;
					var h:Number=rateW*bmp.height;
					bmd=new BitmapData(800,h,true,0);
					bmd.draw(bmp.bitmapData,new Matrix(rateW,0,0,rateW),null,null,null,true);
					bmp=new Bitmap(bmd,"auto",true);
				}
				else if(bmp.height>bmp.width&&bmp.height>800)
				{
					var rateH:Number=800/bmp.height;
					var w:Number=rateH*bmp.width;
					bmd=new BitmapData(w,800,true,0);
					bmd.draw(bmp.bitmapData,new Matrix(rateH,0,0,rateH),null,null,null,true);
					bmp=new Bitmap(bmd,"auto",true);
				}
				var f:FileReference = e.target as FileReference;
				f.removeEventListener(Event.COMPLETE, completeLoadFile);
				arrColl.addItem({img:bmp,file:e.target});
				
				
			});
			loader.loadBytes(e.target.data);
			
		
		}
			
			public function removeFile(data:Object): void  
			{  
				var index: int = arrColl.getItemIndex(data); 
				if (index != -1)  
					arrColl.removeItemAt(index);  
			}  
			
			private function uploadFile(): void  
			{                 
				for each (var obj:Object in arrColl)  
				{             
					try  
					{  
						var f:FileReference = obj.file;
						f.upload(urlrequest);  
					}  
					catch (e: Error)  
					{  
						Alert.show(e.message);  
					}  
				}                 
			}  
			
			private function uploadFileOneByOne():void
			{	
				if(typeof(root.loaderInfo.parameters["Url"])!="undefined")
				{
					urlrequest.url=root.loaderInfo.parameters["Url"];
				}
				if(typeof(root.loaderInfo.parameters["FileFolder"])!="undefined")
				{
					FileFolder=root.loaderInfo.parameters["FileFolder"];
				}
				if(urlrequest.url==null || urlrequest.url=="")
				{
					Alert.show("請求的地址不能爲空.","錯誤");
					return;
				}
			
				var variables:URLVariables = new URLVariables();
				variables.folder = FileFolder;
				urlrequest.data=variables;
				
				for each (var obj:Object in arrColl)  
				{
					singleThreadFiles.push(obj.file);
				}
				singleThreadFiles.reverse();
				singleThreadUploadFile(); 
				
			}
			
			private function singleThreadUploadFile(): void  
			{  
				//FIFO：逐個從列表中取出，進行同步上傳  
				if (singleThreadFiles.length > 0)  
				{  
					var f: FileReference = singleThreadFiles.pop() as FileReference;  
					f.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, doSingleUploadFileComplete);  
					f.upload(urlrequest);  
					
					
				}  
			}  
			private function doSingleUploadFileComplete(event: Event): void  
			{  
				var f: FileReference = event.target as FileReference;  
				f.removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA, doSingleUploadFileComplete);  
				arrColl.removeItemAt(0);
				ExternalInterface.call("onUploaderComplete", f.name);  // 每上傳完一個文件後調用js函數onUploaderComplete   
				singleThreadUploadFile();  
			} 
			
			private function RemoveAllFiles(event:Event):void
			{
				arrColl.removeAll();
			}
		]]>
	</fx:Script>
	
	
	
	
	<mx:Panel id="panel"
			  layout="vertical"
			  horizontalCenter="0"
			  verticalCenter="0"
			  width="645"
			  height="600" headerHeight="0">
		<mx:HBox>
		<mx:Button label="瀏覽"
				   click="btn_click(event);"
				   width="73"
				   height="34"
				   fontSize="12"
				  />
		<mx:Button label="上傳"  width="73"
				   height="34" fontSize="12"> 
			<mx:click> 
				<![CDATA[  
				uploadFileOneByOne();  
				]]> 
			</mx:click> 
		</mx:Button> 
		<mx:Button label="全部刪除" width="73" height="34" fontSize="12" click="RemoveAllFiles(event);">
			
		</mx:Button>
		<mx:Label text="已選擇{arrColl.length}個文件，一次限上傳15個文件" color="Red">
			
		</mx:Label>
		</mx:HBox>
		<mx:TileList id="tileList"
					 dataProvider="{arrColl}"
					 width="640"
					 height="520"
					 verticalScrollPolicy="off"
					 dragEnabled="false" 
					 x="0"
					 y="19">
			<mx:itemRenderer>
				<fx:Component>
					<mx:VBox backgroundColor="#23423D">
						
						<mx:LinkButton label="×" accentColor="#cdddf3"> 
							<mx:click> 
								<![CDATA[  
								outerDocument.removeFile(data);  
								]]> 
							</mx:click> 
						</mx:LinkButton>
						<mx:Image width="120" height="100" source="{data.img}"/>
						<fx: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 = "0%";  
									pb.setProgress(0, 100);  
									var f: FileReference = data.file as FileReference;
									
								//	f.addEventListener(ProgressEvent.PROGRESS,onProcessHandler);
									//使用閉包方法，更新進度條  
									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;  
											pb.setProgress(0,100);
										}  
									);                                             
								}  
							]]> 
						</fx:Script> 
						<mx:ProgressBar verticalCenter="true" width="120" paddingLeft="0" paddingRight="0" 
										maximum="100" minimum="0" labelPlacement="center" mode="manual" 
										label="0%" textAlign="left"  
										creationComplete="initProgressBar(event)"/> 
					</mx:VBox>
				</fx:Component>
			</mx:itemRenderer>
		</mx:TileList>
	
	</mx:Panel>
</s:Application>