Flex上傳多個檔案

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" minWidth="955" minHeight="600" initialize="init()" viewSourceURL="srcview/index.html">
	<fx:Declarations>
		<!-- 将非可視元素（例如服務、值對象）放在此處 -->
		<mx:NumberFormatter id="filesizeFormatter" useThousandsSeparator="true"/> 
	</fx:Declarations>

	
	<fx: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:8666/Ashx/FileHandler.ashx");  
		[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);  
		}  
		]]> 
	</fx: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}" >
			
			<mx:columns> 
				<mx:DataGridColumn width="150" headerText="檔案名" dataField="name" /> 
				
				<mx:DataGridColumn headerText="大小(位元組)" dataField="size"> 
					<mx:itemRenderer> 
						<fx:Component> 
							<mx:Label text="{outerDocument.filesizeFormatter.format(data.size)}" textAlign="right"/> 
						</fx:Component> 
					</mx:itemRenderer> 
				</mx:DataGridColumn> 
				<mx:DataGridColumn headerText="上傳進度" width="300"> 
					<mx:itemRenderer> 
						<fx:Component> 
							<mx:HBox fontSize="10" fontWeight="normal" fontThickness="1"> 
								<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 = "%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;  
									}  
									);                                             
									}  
									]]> 
								</fx: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> 
						</fx:Component> 
					</mx:itemRenderer> 
				</mx:DataGridColumn> 
			</mx:columns> 
		</mx:DataGrid> 
	</mx:VBox> 
	<mx:HBox x="150"> 
		<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"/> 
</s:Application>
           

其中，上面處理上傳和儲存檔案的頁面代碼如下：("http://localhost:8666/Ashx/FileHandler.ashx")

public class FileHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            HttpPostedFile FileData = context.Request.Files["Filedata"];

            string result = "";
            try
            {
               // result = Path.GetFileName(FileData.FileName);//獲得檔案名
                string ext = Path.GetExtension(FileData.FileName);//獲得檔案擴充名
                string newFileName=Guid.NewGuid().ToString();
                string saveName =newFileName + ext;//實際儲存檔案名
                saveFile(FileData, context.Request.MapPath("~" + context.Request["folder"] + "/"), saveName);//儲存檔案
                result = saveName;
            }
            catch (Exception ex)
            {
                result = "";
            }

            context.Response.ContentType = "text/plain";
            context.Response.Write(result);
        }
        private void saveFile(HttpPostedFile postedFile, string phyPath, string saveName)
        {
            if (!Directory.Exists(phyPath))
            {
                Directory.CreateDirectory(phyPath);
            }
            try
            {
                postedFile.SaveAs(phyPath + saveName);
            }
            catch (Exception e)
            {
                throw new ApplicationException(e.Message);

            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }