欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flex與.NET互操作 使用FileReference+HttpHandler實現(xiàn)文件上傳/下載

 更新時間:2009年06月15日 20:08:17   作者:  
Flex與.NET互操作 使用FileReference+HttpHandler實現(xiàn)文件上傳/下載

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

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

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

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

1 internal function initApp():void
2 {
3     file.addEventListener(Event.SELECT,onSelected);
4     file.addEventListener(Event.COMPLETE,onCompleted);
5     file.addEventListener(ProgressEvent.PROGRESS,onProgress);
6 }

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

1 /**
2  * createChildren 比 creationComplete 事件更早發(fā)生
3  * */
4 protected override function createChildren():void
5 {
6     file.addEventListener(Event.SELECT,onSelected);
7     file.addEventListener(Event.COMPLETE,onCompleted);
8     file.addEventListener(ProgressEvent.PROGRESS,onProgress);
9 }

     這三個事件處理函數(shù)的詳細定義如下(其中的stateText為String的變量,用于顯示文件上傳狀態(tài)提示):

 1 internal function onSelected(evt:Event):void
 2 {
 3     stateText = "選擇了文件" + file.name;
 4 }
 5 
 6 internal function onCompleted(evt:Event):void
 7 {
 8     stateText = "上傳完畢!";
 9 }
10 
11 internal function onProgress(evt:ProgressEvent):void
12 {
13     stateText = "已上傳 " + Math.round(100 * evt.bytesLoaded / evt.bytesTotal) + "%";
14 }

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

 1 /**
 2  * 調(diào)用FileReference的實例方法upload()實現(xiàn)文件上傳
 3  * */
 4 internal function onUpLoad():void
 5 {
 6     if(file.size > 0)
 7     {
 8         stateText = "正在上傳文件:" + file.name;
 9     }
10     var request:URLRequest = new URLRequest();
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()方法,將把選擇的文件通過二進制的形式發(fā)送到指定的服務端,并自動傳遞一個叫“fileName”的參數(shù),服務端通過fileName便可以接收到客戶端請求上傳的文件。最后我們來看看服務端的 UpLoadHandler.ashx的詳細定義:

 1 public class UpLoadHandler : IHttpHandler
 2 {
 3     //文件上傳目錄
 4     private string uploadFolder = "UpLoad";
 5 
 6     public void ProcessRequest(HttpContext context)
 7     {
 8         context.Response.ContentType = "text/plain";
 9 
10         HttpFileCollection files = context.Request.Files;
11         if (files.Count > 0)
12         {
13             string path = context.Server.MapPath(uploadFolder);
14             HttpPostedFile file = files[0];
15 
16             if (file != null && file.ContentLength > 0)
17             {
18                 string savePath = path + "/" + context.Request.Form["fileName"];
19                 file.SaveAs(savePath);
20             }
21         }
22         else
23         {
24             context.Response.Write("參數(shù)錯誤");
25             context.Response.End();
26         }
27     }
28 
29     public bool IsReusable
30     {
31         get
32         {
33             return false;
34         }
35     }
36 }

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

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

     要實現(xiàn)文件下載對服務器端只要保證被下載文件存在就OK,同上傳文件一樣需要實例化一個FielReference對象的實例,并為其添加相應的事件處理函數(shù):

1 private var fileDown:FileReference = new FileReference();
 1 /**
 2  * createChildren 比 creationComplete 事件更早發(fā)生
 3  * */
 4 protected override function createChildren():void
 5 {
 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ù),下面是兩個方法的詳細定義:

 1 internal function onDownCompleted(evt:Event):void
 2 {
 3     var fileRef:FileReference = evt.currentTarget as FileReference;
 4     resultLabel.text = "文件名:" + fileRef.name + "下載完畢!";
 5 }
 6 
 7 internal function onDownProgress(evt:ProgressEvent):void
 8 {
 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 internal function onDownLoad():void
5 {
6     var request:URLRequest = new URLRequest();
7     request.url="http://localhost:1146/UpLoad/做你的愛人.mp3";
8     fileDown.download(request);
9 }

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

實現(xiàn)上傳和下載的完整代碼

     程序運行截圖:

      

/SPAN>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 

     程序運行截圖:

      

相關文章

  • Flex 全屏組件 部分全屏的實現(xiàn)代碼

    Flex 全屏組件 部分全屏的實現(xiàn)代碼

    一般情況下,F(xiàn)lex全屏是指將整個舞臺全屏,而不是待定的組件全屏.網(wǎng)上的例子也一般是指這種情況的.
    2009-09-09
  • Flex 畫面快照截圖及顯示實現(xiàn)代碼

    Flex 畫面快照截圖及顯示實現(xiàn)代碼

    在軟件開發(fā)過程中經(jīng)常會有對畫面進行快照截圖的需求,例如把畫面當前顯示的狀態(tài)捕捉下來保存成圖片。接下來討論如何在flex中對畫面進行截圖,畫面截圖完成后怎樣再顯示到畫面上。
    2009-10-10
  • Flex 字符串ReplaceAll使用說明

    Flex 字符串ReplaceAll使用說明

    用過FLEX中String類型的朋友可能知道,replace這個方法并不過替換所有內(nèi)容。那么我們需要替換所有內(nèi)容怎么辦?
    2009-06-06
  • flash/flex/air的一個大問題

    flash/flex/air的一個大問題

    Close Advertisement 對HTML標簽的支持得不夠好?,F(xiàn)在普遍的做法是浮一個iframe。
    2008-12-12
  • Flex 創(chuàng)建一個自定義風格的HRule或VRule

    Flex 創(chuàng)建一個自定義風格的HRule或VRule

    Flex中如何通過strokeWidth, strokeColor和shadowColor樣式,創(chuàng)建一個自定義風格的HRule或VRule
    2009-06-06
  • flex PopUpManager使用說明

    flex PopUpManager使用說明

    PopUpManager在產(chǎn)生TitleWindow時應記錄當前的TitleWindow,目前只能通過1)獲取
    2009-06-06
  • java TO ArrayCollection

    java TO ArrayCollection

    因為new ArrayCollection 需要 array對象,event.result是空間返回對象(JAVA方法返回值)所以類型不同無法使用new 構(gòu)造ArrayCollection ,可是惡心的FLEX偏偏支持javalist=ArrayCollection
    2009-06-06
  • Flex3 界面布局教程 第二篇

    Flex3 界面布局教程 第二篇

    國慶期間,做了不少基于 flex 的開發(fā)工作,對 flex 的布局容器有了進一步深入的理解,也找到不少非常棒的文章,分享到這里方便一下大家。
    2009-10-10
  • Flex TileList自定義間距和theme樣式

    Flex TileList自定義間距和theme樣式

    使用過TileList的朋友可能知道,該組件沒有Item與Item之間的間距設置。而且theme也沒有辦法象linkbar那樣設置樣式corner-radius改變形狀。
    2009-06-06
  • Flex和.NET協(xié)同開發(fā)利器FluorineFx Flex與.NET互操作

    Flex和.NET協(xié)同開發(fā)利器FluorineFx Flex與.NET互操作

    在本系列前面幾篇文章中分別介紹了通過WebService、HTTPService、URLLoader以及FielReference等組件或類來完成Flex與.NET服務端的通信的相關知識點。
    2009-06-06

最新評論