FileReference+HttpHandler实现文件下传/上载

2012-10-26

FileReference+HttpHandler实现文件上传/下载?????在Flex的应用开发中，同ASP.NET,JSP,PHP等应用一样，都会

FileReference+HttpHandler实现文件上传/下载

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

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

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

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

实现上传和下载的完整代码
??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?

?????程序运行截图：

????? FileReference+HttpHandler实现文件下传/上载 ?

热点排行

Web前端

FileReference+HttpHandler实现文件下传/上载