推荐日志

在Flex中使用FileReference类下载文件

[ 2008-03-10 04:04:33 | 发布: N神 ]
字体大小: | |
下面的实例演示了Flex中的 FileReference 类的基本用法,允许用户从服务器上下载一个文件。这个例子也演示了你可以在 DataGrid组件中显示数据提示(data tips) ,只要把 data grid column 的 showDataTips 属性设置为 true ,然后把 column 的 dataTipField 设置一个值就行了。

在下边的演示中,当用户点击按钮的时候会下载一个 zip 文件 ,然后你可以把鼠标移到 DataGrid 组件的 Type 列上,来看额外的 Event 信息。

先看演示:



该演示的代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();">
  
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      import mx.collections.ArrayCollection;
      import flash.net.FileReference;

      [Bindable]
      [Embed('assets/disk.png')]
      private var diskIcon:Class;
      
      [Bindable]
      private var arrColl:ArrayCollection;

      // 要下载文件的URL
      private const FILE_URL:String = "http://www.nshen.net/blog/doc/flex/FileReference_download_test/FileReference_download_test.zip";

      private var fileRef:FileReference;
      private var urlReq:URLRequest;
      
      private function init():void {
        // 初始化一个空ArrayCollection
        arrColl = new ArrayCollection();
        
        // 以FILE_URL指定的地址建立一个URLRequest
        urlReq = new URLRequest(FILE_URL);
        
        // 定义一个FileReference对象,并填加一系列事件监听
        fileRef = new FileReference();
        fileRef.addEventListener(Event.CANCEL, doEvent);
        fileRef.addEventListener(Event.COMPLETE, doEvent);
        fileRef.addEventListener(Event.OPEN, doEvent);
        fileRef.addEventListener(Event.SELECT, doEvent);
        fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
        fileRef.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
        fileRef.addEventListener(ProgressEvent.PROGRESS, doEvent);
        fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);
      }
      
      private function doEvent(evt:Event):void {
        // 取得当前FileReference的引用
        var fr:FileReference = evt.currentTarget as FileReference;
        
        // 填加事件顺序和类型到DataGrid组件
        arrColl.addItem({data:arrColl.length+1, type:evt.type, eventString:evt.toString()});

        try {
          // 更新 Model.
          fileRefModel.creationDate = fr.creationDate;
          fileRefModel.creator = fr.creator;
          fileRefModel.modificationDate = fr.modificationDate;
          fileRefModel.name = fr.name;
          fileRefModel.size = fr.size;
          fileRefModel.type = fr.type;
          // 显示文本
          txt.visible = true;
        } catch (err:*) {
          // uh oh, an error of sorts.
        }
      }

      private function downloadSourceCodeZip():void {
        // 清空现有的 array collection.
        arrColl = new ArrayCollection();
        // 隐藏文本组件
        txt.visible = false;
        // 开始下载
        fileRef.download(urlReq);
      }
      
      private function showAlert(item:Object):void {
        Alert.show(item.eventString, item.type);
      }
    ]]>
  </mx:Script>
  
  <mx:Model id="fileRefModel">
    <file>
      <creationDate>{""}</creationDate>
      <creator>{""}</creator>
      <modificationDate>{""}</modificationDate>
      <name>{""}</name>
      <size>{""}</size>
      <type>{""}</type>
    </file>
  </mx:Model>
  
  <mx:Button id="downloadBtn" label="Download example source code" icon="{diskIcon}" click="downloadSourceCodeZip()" toolTip="{FILE_URL}" height="40" />

  <mx:DataGrid id="debug" dataProvider="{arrColl}" width="{downloadBtn.width}" rowCount="5" rowHeight="22" itemClick="showAlert(event.currentTarget.selectedItem)">
    <mx:columns>
      <mx:DataGridColumn dataField="data" headerText="#" width="20" />
      <mx:DataGridColumn dataField="type" headerText="Type" showDataTips="true" dataTipField="eventString" />
    </mx:columns>
  </mx:DataGrid>
  
  <mx:Text id="txt" condenseWhite="true" visible="false">
    <mx:text>
    creationDate: {fileRefModel.creationDate}
    creator: {fileRefModel.creator}
    modificationDate: {fileRefModel.modificationDate}
    name: {fileRefModel.name}
    size: {fileRefModel.size}
    type: {fileRefModel.type}
    </mx:text>
  </mx:Text>

</mx:Application>

完整代码刚才在演示中你已经下载过了 :)

[exclaim] 查看MXML

此文已经被收录在 《Flex 3 常见组件使用技巧系列 》中,点此进入该主题。

Thanks Flexexamples.com
[最后编辑于 N神, at 2008-03-10 04:26:14]



浏览模式: 阅读全文 | 评论: 4 | 引用: 0 | Toggle Order | 阅读: 10396
1
引用 请教
[ 2008-11-06 12:49:04 ]
N神,你好:
用FLEX的FileReference类进行下载,在调用download()的方法的时候,就会弹出个路径选择对话框,请问,可以避免这个对话框的弹出,并自己指定下载路径吗?谢谢!
引用 Allenwxm
[ 2008-11-11 16:42:21 ]
在flash player 10中
fileReference不能操作本地资源了
这个问题似乎无解......
引用 HCJ*
[ 2008-11-14 09:25:14 ]
用FileReference类的download方法下载同一个文件时,往往第一次是非阻塞的,第二次就是阻塞的了。

比如说,要在服务器下载一个100M的文件abc,第一次下载的时候,进度条还能正常显示,然后把下载好的文件abc删除了,在重新下载一次,问题就出来了,进度条不能正常显示了,一下就从0%跳到100%,这种问题怎么解决呢?
引用 idceye*
[ 2009-04-24 09:25:07 ]
是缓存,下载的时候加上一个随机数,比如 abc.zip?123456877455
这个随机数,可以用UNIX时间戳就行
虚拟主机评测网
www.idceye.com
1

发表评论
表情
[arrow] [biggrin] [confused] [cool]
[cry] [eek] [evil] [exclaim]
[frown] [idea] [lol] [mad]
[mrgreen] [neutral] [question] [razz]
[redface] [rolleyes] [sad] [smile]
[surprised] [twisted] [wink] [sweat]
打开 UBB 编码
自动识别链接
显示表情
隐藏的评论
用户名:   密码:   注册?
验证码 * 请输入验证码