返回列表 12
发布日期: 2009-01-18 发布者: cobra 收藏&分享 中文编程图书最低价热卖  English Programming Books 1#

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

    OK，我们从Flex客户端开始，看看客户端是通过什么方式想服务端发起请求。Flex客户端要完成文件上传下载都是通过FileRefUdderence来实现，首先得定义一个该类型对象实例：
  1. 1 [Bindable]
  2. 2 private var stateText:String = "请选择一个文件上传";
  3. 3 //通过调用file对象的方法来完成上传和下载功能
  4. 4 private var file:FileReference = new FileReference();
复制代码
上传文件通常涉及到的有选择文件、上传文件以及上传完成这些最基本的处理过程。OK，下面我们就以这三个过程为例来看看Flex是怎么来完成文件的上传功能。首先为这三个功能点分别添加监听事件处理函数，在程序加载时调用：
  1. 1 internal function initApp():void
  2. 2 {
  3. 3    file.addEventListener(Event.SELECT,onSelected);
  4. 4    file.addEventListener(Event.COMPLETE,onCompleted);
  5. 5    file.addEventListener(ProgressEvent.PROGRESS,onProgress);
  6. 6 }
复制代码
另外我们也可以不用上面这中定义一个函数在程序加载时调用进行初始化操作，应用程序(mxml)的初始化操作又creationComplete方法完成，另外还有一个比它先执行的方法createChildren(),我们可以直接在mxml下重写该方法来实现应用程序的初始化，如下：
  1. 1 /**
  2. 2  * createChildren 比 creationComplete 事件更早发生
  3. 3  * */
  4. 4 protected override function createChildren():void
  5. 5 {
  6. 6    file.addEventListener(Event.SELECT,onSelected);
  7. 7    file.addEventListener(Event.COMPLETE,onCompleted);
  8. 8    file.addEventListener(ProgressEvent.PROGRESS,onProgress);
  9. 9 }
复制代码
这三个事件处理函数的详细定义如下（其中的stateText为String的变量，用于显示文件上传状态提示）：
  1. 1 internal function onSelected(evt:Event):void
  2. 2 {
  3. 3    stateText = "选择了文件" + file.name;
  4. 4 }
  5. 5
  6. 6 internal function onCompleted(evt:Event):void
  7. 7 {
  8. 8    stateText = "上传完毕！";
  9. 9 }
  10. 10
  11. 11 internal function onProgress(evt:ProgressEvent):void
  12. 12 {
  13. 13    stateText = "已上传 " + Math.round(100 * evt.bytesLoaded / evt.bytesTotal) + "%";
  14. 14 }
复制代码
到这里客户端就只差一步了，那就是完成发起上传请求的方法，实际上就是通过URLRequest对象创建一个与服务端的连接，然后直接调用FielReference类的upload()方法就可完成该功能，详细如下代码定义：
  1. 1 /**
  2. 2  * 调用FileReference的实例方法upload()实现文件上传
  3. 3  * */
  4. 4 internal function onUpLoad():void
  5. 5 {
  6. 6    if(file.size > 0)
  7. 7    {
  8. 8        stateText = "正在上传文件：" + file.name;
  9. 9    }
  10. 10    var request:URLRequest = new URLRequest();
  11. 11    request.url="http://localhost/Web/UpLoadHandler.ashx";
  12. 12    file.upload(request);
  13. 13 }
复制代码
写好了upload方法，现在就是调用他了，通过按扭的click事件直接调用就可以，另外调用file.browse()方法则实现选择文件的功能，如下mxml代码描述：
  1. 1 <mx:TextInput x="10" y="57" id="txtFile" text="{stateText}" width="229"/>
  2. 2 <mx:Button x="247" y="57" label="选择" fontWeight="normal" click="{file.browse()}"/>
  3. 3 <mx:Button x="29" y="111" label="上传文件" width="111" fontWeight="normal" click="onUpLoad()"/>
复制代码
如上便完成了上传文件的Flex客户端开发，通过file.upload()方法，将把选择的文件通过二进制的形式发送到指定的服务端，并自动传递一个叫“fileName”的参数，服务端通过fileName便可以接收到客户端请求上传的文件。最后我们来看看服务端的UpLoadHandler.ashx的详细定义：
  1. 1 public class UpLoadHandler : IHttpHandler
  2. 2 {
  3. 3    //文件上传目录
  4. 4    private string uploadFolder = "UpLoad";
  5. 5
  6. 6    public void ProcessRequest(HttpContext context)
  7. 7    {
  8. 8        context.Response.ContentType = "text/plain";
  9. 9
  10. 10        HttpFileCollection files = context.Request.Files;
  11. 11        if (files.Count > 0)
  12. 12        {
  13. 13            string path = context.Server.MapPath(uploadFolder);
  14. 14            HttpPostedFile file = files[0];
  15. 15
  16. 16            if (file != null && file.ContentLength > 0)
  17. 17            {
  18. 18                string savePath = path + "/" + context.Request.Form["fileName"];
  19. 19                file.SaveAs(savePath);
  20. 20            }
  21. 21        }
  22. 22        else
  23. 23        {
  24. 24            context.Response.Write("参数错误");
  25. 25            context.Response.End();
  26. 26        }
  27. 27    }
  28. 28
  29. 29    public bool IsReusable
  30. 30    {
  31. 31        get
  32. 32        {
  33. 33            return false;
  34. 34        }
  35. 35    }
  36. 36 }
复制代码
如上一系列的步骤便可完成上传文件的功能，下面便是上传文件示例程序运行截图：   
   
附件: UpLoadFile.jpg


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



作      者：Beniao
文章出处：http://beniao.cnblogs.com/
TOP
返回列表 12