在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实现文件上传/下载相关推荐

  1. android 文件上传工具类,Android快速开发架构PlanA（五），文件上传下载了解一下...

    1.PlanA文件上传&下载的使用 PlanA架构集成第五篇,文件上传下载的使用,文件上传&下载在APP里面随处可见,发朋友圈要上传图片或者短视频,换个头像要上传选择的图片,offic ...

  2. springmvc代码详细(五种映射，绑定参数，处理json数据，文件上传，转发，拦截器的实现)

    项目结构图: 父工程的pom.xml文件: <!-- 集中定义依赖版本号 --><properties><junit.version>4.10</junit. ...

  3. Spring MVC 学习总结（五）——校验与文件上传

    目录 一.Spring MVC验证器Validator 1.1.定义验证器 1.2.执行校验 1.3.在UI中添加错误标签 1.4.测试运行 二.JSR303验证器 2.1.添加hibernate-v ...

  4. Spring MVC 学习总结（五）——校验与文件上传 转自 张果 博客；已经编程校验；正确无误；...

    Spring MVC 学习总结(五)--校验与文件上传 目录 一.Spring MVC验证器Validator 1.1.定义验证器 1.2.执行校验 1.3.在UI中添加错误标签 1.4.测试运行 二 ...

  5. Vue实战篇五：实现文件上传

    系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...

  6. flex java red5_使用 Flex 和Java servlets 将文件上传到 RED5 服务器的步骤

    本文使用一个 demo 来演示如何使用 Flex 和 Java servlets 上传一个任意类型的本地文件到 RED5 服务器.使用的是 Flex 的 FileReference 接口,该接口可以对 ...

  7. flex file 文件上传 带参数 php,php+flex打造多文件带进度超级上传

    以下为引用的内容: import com.newmediateam.fileIO.*; import flash.events.*; import flash.media.*; import flas ...

  8. flex java 上传下载_完整的Flex多文件上传实例

    客户端代码:fileUpload.xml-------------------------------------------------------------------------------- ...

  9. 完整的Flex多文件上传实例

     客户端代码:fileUpload.xml------------------------------------------------------------------------------- ...

最新文章

  1. 在Linux下查看共享文件夹
  2. Windbg、dump分析类资源链接
  3. 统计之都统计分析和R语言方面的图书
  4. 服务程序在c#中的写法
  5. 常用API-3（System类、Math类、Arrays类、正则表达式）
  6. 点在多边形内 java_判断点在多边形内部的方法(Java版)
  7. 剑指Offer 64 求1+2+...+n
  8. JSONObject对象和JSONArray对象的使用
  9. Spring Boot应用热启动的一种方式
  10. 使用UIImageView实现加载GIF图片
  11. html form提交heard,德普前妻Amber Heard戛纳合辑
  12. Git fatal: Authentication failed for
  13. 阿里云服务器能抗ddos攻击吗
  14. CrawlSpider实现微信小程序社区爬虫【python爬虫入门进阶】（18）
  15. C# 学习笔记：委托（5）：可变性
  16. 揭秘淘宝双11，亿级流量高并发是怎么抗住的？
  17. excel单元格内容拆分_Excel中把一个单元格内容拆分到多个单元格内的两种方法...
  18. 适用于WordPress的10个最佳白标签品牌插件
  19. 制作macOS Monterey启动U盘
  20. 趣味博弈论 -- 阶梯博弈

热门文章

  1. C++palindrome partitioning回文分割算法的实现(附完整源码)
  2. C语言实现AVL树(附完整源码)
  3. c++状态模式state
  4. python 爬取作品集_Python批量抓取站酷ZCOOL作品图片并归档
  5. python写入一个文件之前可以不打开_如何用python实现真正的打开和关闭文件
  6. jsp连接mysql显示404,SpringBoot+jsp项目启动出现404的解决方法
  7. mysql免安装版大小,mysql安装(免安装版,压缩版)
  8. java web 耗时请求_javaweb应用中出现了一个耗时异常长的数据查询，寻求帮助
  9. C++ vector的用法
  10. Linux系统入门学习：在Debian或Ubuntu上安装完整的内核源码