Flex与.NET互操作 使用FileReference+HttpHandler实现文件上传/下载_Flex

在Flex的应用开发中，同ASP.NET,JSP,PHP等应用一样，都会有上传/下载文件的应用需求，Flex的SDK也为我们提供了专门的类 FileRefUdderence实现文件上传/下载。Flex只是作为一个客户端，要实现上传或下载必须得为其提供一个服务端来接受上传或下载的请求，本文以ASP.NET中的HttpHandler作为文件上传的服务端来完成上传功能。

     OK，我们从Flex客户端开始，看看客户端是通过什么方式想服务端发起请求。Flex客户端要完成文件上传下载都是通过FileRefUdderence来实现，首先得定义一个该类型对象实例：

1 [Bindable]
2 private var stateText:String = "请选择一个文件上传";
3 //通过调用file对象的方法来完成上传和下载功能
4 private var file:FileReference = new FileReference();

     上传文件通常涉及到的有选择文件、上传文件以及上传完成这些最基本的处理过程。OK，下面我们就以这三个过程为例来看看Flex是怎么来完成文件的上传功能。首先为这三个功能点分别添加监听事件处理函数，在程序加载时调用：

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 }

     另外我们也可以不用上面这中定义一个函数在程序加载时调用进行初始化操作，应用程序(mxml)的初始化操作又 creationComplete方法完成，另外还有一个比它先执行的方法createChildren(),我们可以直接在mxml下重写该方法来实现应用程序的初始化，如下：

1 /**
2  * createChildren 比 creationComplete 事件更早发生
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 }

     这三个事件处理函数的详细定义如下（其中的stateText为String的变量，用于显示文件上传状态提示）：

 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 }

     到这里客户端就只差一步了，那就是完成发起上传请求的方法，实际上就是通过URLRequest对象创建一个与服务端的连接，然后直接调用FielReference类的upload()方法就可完成该功能，详细如下代码定义：

 1 /**
 2  * 调用FileReference的实例方法upload()实现文件上传
 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方法，现在就是调用他了，通过按扭的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 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("参数错误");
25             context.Response.End();
26         }
27     }
28 
29     public bool IsReusable
30     {
31         get
32         {
33             return false;
34         }
35     }
36 }

     如上一系列的步骤便可完成上传文件的功能，下面便是上传文件示例程序运行截图：     
     

     实现了文件上传下面来看看怎么实现文件下载， 以上面上传示例中上传的mp3为例，下面我们来看看怎么从服务器（http://localhost/Web/UpLoad/做你的爱人.mp3）上完成文件（做你的爱人.mp3）的下载。

     要实现文件下载对服务器端只要保证被下载文件存在就OK，同上传文件一样需要实例化一个FielReference对象的实例，并为其添加相应的事件处理函数：

1 private var fileDown:FileReference = new FileReference();

 1 /**
 2  * createChildren 比 creationComplete 事件更早发生
 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     //实现文件下载
11     fileDown.addEventListener(Event.COMPLETE,onDownCompleted);
12     fileDown.addEventListener(ProgressEvent.PROGRESS,onDownProgress);
13 }

     如上为实现下载文件的实例fileDown注册了成功下载文件后事件处理函数和下载过程处理函数，下面是两个方法的详细定义：

 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 }

     完成了对象事件的开发，最后便上惩罚下载请求了，直接调用FileReference类所提供的download()方法既可：

1 /**
2  * 调用FileReference类的实例方法download()实现文件下载
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 }

     程序执行到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=" 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 

     程序运行截图：

      

/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 事件更早发生
 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 

时间： 2024-09-21 12:31:35

Flex与.NET互操作 使用FileReference+HttpHandler实现文件上传/下载_Flex的相关文章

Flex与.NET互操作(五)：使用FileReference+HttpHandler实现文件上传/下载

在Flex的应用开发中,同ASP.NET,JSP,PHP等应用一样,都会有上传/下载文件的应用需求,Flex的SDK也为我们提供了专门的类 FileRefUdderence实现文件上传/下载 .Flex只是作为一个客户端,要实现上传或下载必须得为其提供一个服务端来接受上传或下载的请求, 本文以ASP.NET中的HttpHandler作为文件上传的服务端来完成上传功能. OK,我们从Flex客户端开始,看看客户端是通过什么方式想 服务端发起请求.Flex客户端要完成文件上传下载都是通过FileRe

使用FLEX进行多文件上传和自定义上传信息

在Web应用中上传文件是比较常见的需求,在这里通过一个实际应用向大家介绍一下在 Flex下如何进行多文件上传,并在上传文件的同时提供一些自定义描述信息以便数据逻辑处 理. 功能需求 首先通过以下界面了解一下需求: 主要功能 包括: 1)允许添加多个上传的文件 2)自定义文件标题 3)可以对没 上传的或正在上传的文件删除 4)上传过程把窗体隐藏在后台,不影响用户的其他的 操作(这个就很简单,把窗体隐藏起来在主界面显示个上进工作按钮就可以了,需要的时候 再点击一下查看进度)

flex 文件上传 ProgressEvent监视问题

问题描述 flex 文件上传 ProgressEvent监视问题 ProgressEvent 的得到的 bytesLoaded 一开始就和 bytesTotal 就一样多?上传总是出问题,坐等求助啊!

flex socket 文件上传-求助大神，使用flex+socket上传超过2G的文件

问题描述 求助大神,使用flex+socket上传超过2G的文件 目前我有个项目中需要使用flex+socket把2G以上的文件上传到服务器,但是flex里面的FileRefrence中的load方法最大支持100M,在网上找到都是通过flex中的upload()方法+servlet来实现的,但是使用servlet的话http协议应该就只能支持2G以下的了.请各位有研究过的大神给点意见或者例子之类的,小弟在这里感激不尽哇!!!

Flex与.NET互操作(十五)

Flex与.NET互操作(十五):使用FluorineFx中的字节数组(ByteArray)实现图片上传 前几天一位朋友问我一个问题,他说:"我用HTTP接口或是WebService接口可以实现图片上传功能,那么用FluorineFx如何实现图片 上传功能呢?",其实仔细看官方文档和示例程序的自己都可以找到答案,实现上传可以有很多种实现,这里我以官方所提供是示例为基 础稍加改动,通过ByteArray类实现图片上传. 首先建立FluorineFx库和网站,在远程服务器类里添加一个处理文

技巧之使用 Flex 上传文件

技巧|上传 教程很简单, 先看看演示http://kakera.35818.net/uploadsample/ 客户端, 只有 1 个 mxml, 看注释就明UploadSample.mxml 代码拷贝框<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertic

Flex与.NET互操作(十二)

Flex与.NET互操作(十二):FluorineFx.Net的及时通信应用(Remote Shared Objects)(三) 远程共享对象(Remote Shared Objects) 可以用来跟踪.存储.共享以及做多客户端的数据同步操作.只要共享对象上的数据发生了改变 ,将会把最新数据同步到所有连接到该共享对象的应用程序客户端.FluorineFx所提供的远程共享对象(Remote Shared Objects)和FMS的共享 对象的功能是一样,对于熟悉FMS开发的朋友来说,学习Fluor

Flex与.NET互操作(十)

Flex与.NET互操作(十):基于FluorineFx.Net的及时通信应用(Real-time Messaging Applications)(一) 使用FluorineFx.Net开发的每一个实时通讯功能应用都拥有一个应用程序适配器(ApplicationAdapter),用来管理整个实时通讯应用的生 命周期,以及接受和拒绝客户端的连接等.应用程序适配器对象也就相当于是一个Flash媒体服务器应用程序的对象. 使用 FluorineFx.Net开发及时通信应用,我们可以通过ASP.NET网

Flex与.NET互操作(十一)

Flex与.NET互操作(十一):基于FluorineFx.Net的及时通信应用(Remote Procedure Call)(二) FluorineFx.NET提供了完善的RPC(Remote Procedure Call)功能,无论是通过Flash还是Flex开发的客户端应用(.swf)都可以非常简单方便 的采用RPC的方式调用.NET的服务器端方法,.NET的服务器端同样也可以非常方便的呼叫客户端,调用客户端的方法(比如实现系统广播). 一.客户端的RPC(客户端调用服务器端) 要想实现客