Flex与.NET互操作(五)：使用FileReference+HttpHandler实现文件上传/下载
在Flex的應(yīng)用開發(fā)中，同ASP.NET,JSP,PHP等應(yīng)用一樣，都會有上傳/下載文件的應(yīng)用需求，Flex的SDK也為我們提供了專門的類FileRefUdderence實現(xiàn)文件上傳/下載?。Flex只是作為一個客戶端，要實現(xiàn)上傳或下載必須得為其提供一個服務(wù)端來接受上傳或下載的請求，本文以ASP.NET中的HttpHandler作為文件上傳的服務(wù)端來完成上傳功能。
?????OK，我們從Flex客戶端開始，看看客戶端是通過什么方式想服務(wù)端發(fā)起請求。Flex客戶端要完成文件上傳下載都是通過FileRefUdderence來實現(xiàn)，首先得定義一個該類型對象實例：
1?[Bindable]2?privatevar?stateText:String?="請選擇一個文件上傳";3?//通過調(diào)用file對象的方法來完成上傳和下載功能4?privatevar?file:FileReference?=newFileReference();?????上傳文件通常涉及到的有選擇文件、上傳文件以及上傳完成這些最基本的處理過程。OK，下面我們就以這三個過程為例來看看Flex是怎么來完成文件的上傳功能。首先為這三個功能點分別添加監(jiān)聽事件處理函數(shù)，在程序加載時調(diào)用：
1?internalfunction?initApp():void2?{3?file.addEventListener(Event.SELECT,onSelected);4?file.addEventListener(Event.COMPLETE,onCompleted);5?file.addEventListener(ProgressEvent.PROGRESS,onProgress);6?}?????另外我們也可以不用上面這中定義一個函數(shù)在程序加載時調(diào)用進(jìn)行初始化操作，應(yīng)用程序(mxml)的初始化操作又creationComplete方法完成，另外還有一個比它先執(zhí)行的方法createChildren(),我們可以直接在mxml下重寫該方法來實現(xiàn)應(yīng)用程序的初始化，如下：
1?/**2?*?createChildren?比?creationComplete?事件更早發(fā)生3?*?*/4?protectedoverridefunction?createChildren():void5?{6?file.addEventListener(Event.SELECT,onSelected);7?file.addEventListener(Event.COMPLETE,onCompleted);8?file.addEventListener(ProgressEvent.PROGRESS,onProgress);9?}?????這三個事件處理函數(shù)的詳細(xì)定義如下(其中的stateText為String的變量，用于顯示文件上傳狀態(tài)提示)：
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?}?????到這里客戶端就只差一步了，那就是完成發(fā)起上傳請求的方法，實際上就是通過URLRequest對象創(chuàng)建一個與服務(wù)端的連接，然后直接調(diào)用FielReference類的upload()方法就可完成該功能，詳細(xì)如下代碼定義：
1?/**2?*?調(diào)用FileReference的實例方法upload()實現(xiàn)文件上傳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方法，現(xiàn)在就是調(diào)用他了，通過按扭的click事件直接調(diào)用就可以，另外調(diào)用file.browse()方法則實現(xiàn)選擇文件的功能，如下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客戶端開發(fā)，通過file.upload()方法，將把選擇的文件通過二進(jìn)制的形式發(fā)送到指定的服務(wù)端，并自動傳遞一個叫“fileName”的參數(shù)，服務(wù)端通過fileName便可以接收到客戶端請求上傳的文件。最后我們來看看服務(wù)端的UpLoadHandler.ashx的詳細(xì)定義：
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("參數(shù)錯誤");25?context.Response.End();26?}27?}28?29?publicboolIsReusable30?{31?get32?{33?returnfalse;34?}35?}36?}?????如上一系列的步驟便可完成上傳文件的功能，下面便是上傳文件示例程序運(yùn)行截圖：?????
?????實現(xiàn)了文件上傳下面來看看怎么實現(xiàn)文件下載，?以上面上傳示例中上傳的mp3為例，下面我們來看看怎么從服務(wù)器(http://localhost/Web/UpLoad/做你的愛人.mp3)上完成文件(做你的愛人.mp3)的下載。
?????要實現(xiàn)文件下載對服務(wù)器端只要保證被下載文件存在就OK，同上傳文件一樣需要實例化一個FielReference對象的實例，并為其添加相應(yīng)的事件處理函數(shù)：
1?privatevar?fileDown:FileReference?=newFileReference(); 1?/**2?*?createChildren?比?creationComplete?事件更早發(fā)生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?//實現(xiàn)文件下載11?fileDown.addEventListener(Event.COMPLETE,onDownCompleted);12?fileDown.addEventListener(ProgressEvent.PROGRESS,onDownProgress);13?}?????如上為實現(xiàn)下載文件的實例fileDown注冊了成功下載文件后事件處理函數(shù)和下載過程處理函數(shù)，下面是兩個方法的詳細(xì)定義：
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?}?????完成了對象事件的開發(fā)，最后便上懲罰下載請求了，直接調(diào)用FileReference類所提供的download()方法既可：
1?/**2?*?調(diào)用FileReference類的實例方法download()實現(xiàn)文件下載3?*?*/4?internalfunction?onDownLoad():void5?{6?var?request:URLRequest?=newURLRequest();7?request.url="http://localhost:1146/UpLoad/做你的愛人.mp3";8?fileDown.download(request);9?}?????程序執(zhí)行到download()方法的時候會自動彈出選擇保存文件對話框，根據(jù)實際情況選擇好保存路徑就OK。下面是實現(xiàn)上傳和下載的完整代碼：
??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?事件更早發(fā)生?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??????????????*?調(diào)用FileReference的實例方法upload()實現(xiàn)文件上傳?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??????????????*?調(diào)用FileReference類的實例方法download()實現(xiàn)文件下載?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??????程序運(yùn)行截圖：
?????
? 版權(quán)說明? 本文屬原創(chuàng)文章，歡迎轉(zhuǎn)載，其版權(quán)歸作者和博客園共有。??
? 作??????者：Beniao
?文章出處：?http://www.cnblogs.com/
總結(jié)
以上是生活随笔為你收集整理的Flex与.NET互操作(五)：使用FileReference+HttpHandler实现文件上传/下载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： fx是什么项目
- 下一篇： 微粒贷逾期5天了 会不会通知家人