在Flex的應用開發中，同ASP.NET,JSP,PHP等應用一樣，都會有上傳/下載文件的應用需求，Flex的SDK也為我們提供了專門的類FileRefUdderence實現文件上傳/下載?。Flex只是作為一個客戶端，要實現上傳或下載必須得為其提供一個服務端來接受上傳或下載的請求，本文以ASP.NET中的HttpHandler作為文件上傳的服務端來完成上傳功能。

?????OK，我們從Flex客戶端開始，看看客戶端是通過什么方式想服務端發起請求。Flex客戶端要完成文件上傳下載都是通過FileRefUdderence來實現，首先得定義一個該類型對象實例：

1?[Bindable]2?privatevar?stateText:String?="請選擇一個文件上傳";3?//通過調用file對象的方法來完成上傳和下載功能4?privatevar?file:FileReference?=newFileReference();

?????上傳文件通常涉及到的有選擇文件、上傳文件以及上傳完成這些最基本的處理過程。OK，下面我們就以這三個過程為例來看看Flex是怎么來完成文件的上傳功能。首先為這三個功能點分別添加監聽事件處理函數，在程序加載時調用：

1?internalfunction?initApp():void2?{3?file.addEventListener(Event.SELECT,onSelected);4?file.addEventListener(Event.COMPLETE,onCompleted);5?file.addEventListener(ProgressEvent.PROGRESS,onProgress);6?}

?????另外我們也可以不用上面這中定義一個函數在程序加載時調用進行初始化操作，應用程序(mxml)的初始化操作又creationComplete方法完成，另外還有一個比它先執行的方法createChildren(),我們可以直接在mxml下重寫該方法來實現應用程序的初始化，如下：

1?/**2?*?createChildren?比?creationComplete?事件更早發生3?*?*/4?protectedoverridefunction?createChildren():void5?{6?file.addEventListener(Event.SELECT,onSelected);7?file.addEventListener(Event.COMPLETE,onCompleted);8?file.addEventListener(ProgressEvent.PROGRESS,onProgress);9?}

?????這三個事件處理函數的詳細定義如下(其中的stateText為String的變量，用于顯示文件上傳狀態提示)：

1?internalfunction?onSelected(evt:Event):void2?{3?stateText?="選擇了文件"+file.name;4?}5?6?internalfunction?onCompleted(evt:Event):void7?{8?stateText?="上傳完畢！";9?}10?11?internalfunction?onProgress(evt:ProgressEvent):void12?{13?stateText?="已上傳?"+Math.round(100*evt.bytesLoaded?/evt.bytesTotal)?+"%";14?}

?????到這里客戶端就只差一步了，那就是完成發起上傳請求的方法，實際上就是通過URLRequest對象創建一個與服務端的連接，然后直接調用FielReference類的upload()方法就可完成該功能，詳細如下代碼定義：

1?/**2?*?調用FileReference的實例方法upload()實現文件上傳3?*?*/4?internalfunction?onUpLoad():void5?{6?if(file.size?>0)7?{8?stateText?="正在上傳文件："+file.name;9?}10?var?request:URLRequest?=newURLRequest();11?request.url="http://localhost/Web/UpLoadHandler.ashx";12?file.upload(request);13?}

?????寫好了upload方法，現在就是調用他了，通過按扭的click事件直接調用就可以，另外調用file.browse()方法則實現選擇文件的功能，如下mxml代碼描述：

1?<mx:TextInput?x="10"y="57"id="txtFile"text="{stateText}"width="229"/>2?<mx:Button?x="247"y="57"label="選擇"fontWeight="normal"click="{file.browse()}"/>3?<mx:Button?x="29"y="111"label="上傳文件"width="111"fontWeight="normal"click="onUpLoad()"/>

?????如上便完成了上傳文件的Flex客戶端開發，通過file.upload()方法，將把選擇的文件通過二進制的形式發送到指定的服務端，并自動傳遞一個叫“fileName”的參數，服務端通過fileName便可以接收到客戶端請求上傳的文件。最后我們來看看服務端的UpLoadHandler.ashx的詳細定義：

1?publicclassUpLoadHandler?:?IHttpHandler2?{3?//文件上傳目錄4?privatestringuploadFolder?="UpLoad";5?6?publicvoidProcessRequest(HttpContext?context)7?{8?context.Response.ContentType?="text/plain";9?10?HttpFileCollection?files?=context.Request.Files;11?if(files.Count?>0)12?{13?stringpath?=context.Server.MapPath(uploadFolder);14?HttpPostedFile?file?=files[0];15?16?if(file?!=null&&file.ContentLength?>0)17?{18?stringsavePath?=path?+"/"+context.Request.Form["fileName"];19?file.SaveAs(savePath);20?}21?}22?else23?{24?context.Response.Write("參數錯誤");25?context.Response.End();26?}27?}28?29?publicboolIsReusable30?{31?get32?{33?returnfalse;34?}35?}36?}

?????如上一系列的步驟便可完成上傳文件的功能，下面便是上傳文件示例程序運行截圖：?????

?????實現了文件上傳下面來看看怎么實現文件下載，?以上面上傳示例中上傳的mp3為例，下面我們來看看怎么從服務器(http://localhost/Web/UpLoad/做你的愛人.mp3)上完成文件(做你的愛人.mp3)的下載。

?????要實現文件下載對服務器端只要保證被下載文件存在就OK，同上傳文件一樣需要實例化一個FielReference對象的實例，并為其添加相應的事件處理函數：

1?privatevar?fileDown:FileReference?=newFileReference(); 1?/**2?*?createChildren?比?creationComplete?事件更早發生3?*?*/4?protectedoverridefunction?createChildren():void5?{6?super.createChildren();7?file.addEventListener(Event.SELECT,onSelected);8?file.addEventListener(Event.COMPLETE,onCompleted);9?file.addEventListener(ProgressEvent.PROGRESS,onProgress);10?//實現文件下載11?fileDown.addEventListener(Event.COMPLETE,onDownCompleted);12?fileDown.addEventListener(ProgressEvent.PROGRESS,onDownProgress);13?}

?????如上為實現下載文件的實例fileDown注冊了成功下載文件后事件處理函數和下載過程處理函數，下面是兩個方法的詳細定義：

1?internalfunction?onDownCompleted(evt:Event):void2?{3?var?fileRef:FileReference?=evt.currentTarget?asFileReference;4?resultLabel.text?="文件名："+fileRef.name?+"下載完畢！";5?}6?7?internalfunction?onDownProgress(evt:ProgressEvent):void8?{9?downState.text?="已下載：?"+Math.round(100*evt.bytesLoaded?/evt.bytesTotal)?+"%";10?}

?????完成了對象事件的開發，最后便上懲罰下載請求了，直接調用FileReference類所提供的download()方法既可：

1?/**2?*?調用FileReference類的實例方法download()實現文件下載3?*?*/4?internalfunction?onDownLoad():void5?{6?var?request:URLRequest?=newURLRequest();7?request.url="http://localhost:1146/UpLoad/做你的愛人.mp3";8?fileDown.download(request);9?}

?????程序執行到download()方法的時候會自動彈出選擇保存文件對話框，根據實際情況選擇好保存路徑就OK。下面是實現上傳和下載的完整代碼：

??1?<?xml?version="1.0"?encoding="utf-8"?>??2?<mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute">??3?????<mx:Panel?x="49"?y="66"?width="551"?height="164"?layout="absolute"???4?????????title="使用FileReference上傳/下載文件"?fontSize="12">??5?????????<mx:HDividedBox?x="10"?y="10"?width="511"?height="102">??6?????????????<mx:Canvas??id="left"?backgroundColor="#D7F4FF"?height="100%"?width="209">??7?????????????<mx:TextInput?x="4"?y="20"?id="txtFile"?text="{stateText}"?width="135"/>??8?????????????<mx:Button?x="147"?y="20"?label="選擇"?fontWeight="normal"?click="{file.browse()}"/>??9?????????????<mx:Button?x="31"?y="68"?label="上傳文件"?width="111"?fontWeight="normal"?click="onUpLoad()"/>?10?????????????</mx:Canvas>?11?????????????<mx:Canvas?id="right"?backgroundColor="#D7F4FF"?height="100%"?width="282">?12?????????????????<mx:Label?x="6"?y="9"?text="http://localhost/Web/UpLoad/做你的愛人.mp3"/>?13?????????????????<mx:Button?x="10"?y="37"?label="下載文件"?fontWeight="normal"?click="onDownLoad()"/>?14?????????????????<mx:Label?x="10"?y="74"?width="272"?id="resultLabel"/>?15?????????????????<mx:TextInput?x="122"?y="37"?id="downState"/>?16?????????????</mx:Canvas>?17?????????</mx:HDividedBox>?18??????????19?????</mx:Panel>?20?????????<mx:Script>?21?????????<![CDATA[?22?????????????[Bindable]?23?????????????private?var?stateText:String?=?"請選擇一個文件上傳";?24??????????????25?????????????private?var?file:FileReference?=?new?FileReference();?26?????????????private?var?fileDown:FileReference?=?new?FileReference();?27??????????????28?????????????/**?29??????????????*?createChildren?比?creationComplete?事件更早發生?30??????????????*?*/?31?????????????protected?override?function?createChildren():void?32?????????????{?33?????????????????super.createChildren();?34?????????????????file.addEventListener(Event.SELECT,onSelected);?35?????????????????file.addEventListener(Event.COMPLETE,onCompleted);?36?????????????????file.addEventListener(ProgressEvent.PROGRESS,onProgress);?37??????????????????38?????????????????fileDown.addEventListener(Event.COMPLETE,onDownCompleted);?39?????????????????fileDown.addEventListener(ProgressEvent.PROGRESS,onDownProgress);?40?????????????}?41??????????????42?//????????????internal?function?initApp():void?43?//????????????{?44?//????????????????file.addEventListener(Event.SELECT,onSelected);?45?//????????????????file.addEventListener(Event.COMPLETE,onCompleted);?46?//????????????????file.addEventListener(ProgressEvent.PROGRESS,onProgress);?47?//????????????}?48??????????????49?????????????internal?function?onSelected(evt:Event):void?50?????????????{?51?????????????????stateText?=?"選擇了文件:"?+?file.name;?52?????????????}?53??????????????54?????????????internal?function?onCompleted(evt:Event):void?55?????????????{?56?????????????????stateText?=?"上傳完畢！";?57?????????????}?58??????????????59??????????????60?????????????internal?function?onDownCompleted(evt:Event):void?61?????????????{?62?????????????????var?fileRef:FileReference?=?evt.currentTarget?as?FileReference;?63?????????????????resultLabel.text?=?"文件名："?+?fileRef.name?+?"下載完畢！";?64?????????????}?65??????????????66?????????????internal?function?onProgress(evt:ProgressEvent):void?67?????????????{?68?????????????????stateText?=?"已上傳：?"?+?Math.round(100?*?evt.bytesLoaded?/?evt.bytesTotal)?+?"%";?69??????????????????70?????????????}?71??????????????72?????????????internal?function?onDownProgress(evt:ProgressEvent):void?73?????????????{?74?????????????????downState.text?=?"已下載：?"?+?Math.round(100?*?evt.bytesLoaded?/?evt.bytesTotal)?+?"%";?75?????????????}?76??????????????77?????????????/**?78??????????????*?調用FileReference的實例方法upload()實現文件上傳?79??????????????*?*/?80?????????????internal?function?onUpLoad():void?81?????????????{?82?????????????????if(file.size?>?0)?83?????????????????{?84?????????????????????stateText?=?"正在上傳文件："?+?file.name;?85?????????????????}?86?????????????????var?request:URLRequest?=?new?URLRequest();?87?????????????????request.url=http://localhost/Web/UpLoadHandler.ashx;?88?????????????????file.upload(request);?89?????????????}?90??????????????91?????????????/**?92??????????????*?調用FileReference類的實例方法download()實現文件下載?93??????????????*?*/?94?????????????internal?function?onDownLoad():void?95?????????????{?96?????????????????var?request:URLRequest?=?new?URLRequest();?97?????????????????request.url="http://localhost/Web/UpLoad/做你的愛人.mp3";?98?????????????????fileDown.download(request);?99?????????????}100?????????]]>101?????</mx:Script>102?</mx:Application>103?

?????程序運行截圖：

?????

? 版權說明

? 本文屬原創文章，歡迎轉載，其版權歸作者和博客園共有。??

? 作??????者：Beniao

?文章出處：?http://www.cnblogs.com/

總結

以上是生活随笔為你收集整理的Flex与.NET互操作(五)：使用FileReference+HttpHandler实现文件上传/下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。