前几天一位朋友问我一个问题,他说:“我用HTTP接口或是WebService接口可以实现图片上传功能,那么用FluorineFx如何实现图片上传功能呢?”,其实仔细看官方文档和示例程序的自己都可以找到答案,实现上传可以有很多种实现,这里我以官方所提供是示例为基础稍加改动,通过ByteArray类实现图片上传。
首先建立FluorineFx库和网站,在远程服务器类里添加一个处理文件上传的方法,详细代码如下:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->namespaceByteStream.Services
{
[RemotingService]
publicclassByteStreamService
{
publicByteArrayUploadImage(ByteArrayba)
{
MemoryStreamms=newMemoryStream(ba.GetBuffer());
Imageimg=Bitmap.FromStream(ms);
BitmapnewImage=newBitmap(img);
MemoryStreamtempStream=newMemoryStream();
newImage.Save(tempStream,System.Drawing.Imaging.ImageFormat.Png);
stringpath=HttpContext.Current.Server.MapPath("UpLoad/ByteArray.png");
FileStreamfs=newFileStream(path,FileMode.Create);
tempStream.WriteTo(fs);
fs.Close();
ByteArrayresult=newByteArray(tempStream);
returnresult;
}
}
}
处理图片上传的方法通过把flex客户端传递来的字节数组包装为内存流,然后通过写文件的形式将图片保存到指定的目录下。示例中提供了一个画图板,用户可以通过选择颜色自画不同的图象,然后保存到服务器上指定的目录。画图板的实现是根据鼠标按下的移动路线做的,代码如下:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->privatefunctiondoMouseDown():void
{
x1=myCanvas.mouseX;
y1=myCanvas.mouseY;
isDrawing=true;
}
privatefunctiondoMouseMove():void
{
x2=myCanvas.mouseX;
y2=myCanvas.mouseY;
if(isDrawing)
{
myCanvas.graphics.lineStyle(2,drawColor);
myCanvas.graphics.moveTo(x1,y1);
myCanvas.graphics.lineTo(x2,y2);
x1=x2;
y1=y2;
}
}
privatefunctiondoMouseUp():void
{
isDrawing=false;
}
//清空画图板
privatefunctiononErase(event:MouseEvent):void
{
myCanvas.graphics.clear();
}
在官方实例中是使用的RemoteObject实现的,这里我将其修改为通过编程实现AMF通信实现当程序初始化的时候就建立与FluorineFx网关的AMF通信连接:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->privatevarnc:NetConnection;
privatevarrs:Responder;
privatefunctioninit():void
{
rs=newResponder(onResult,onFault);
nc=newNetConnection();
nc.connect("http://localhost:2453/FluorineFxWeb/Gateway.aspx")
nc.client=this;
}
在Flex客户端通过当前网络连接的call()方法实现远程方法调用,并指定通过Responder来处理服务器端方法的返回结果。
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->privatefunctiononSaveImage(event:MouseEvent):void
{
varbd:BitmapData=newBitmapData(myCanvas.width,myCanvas.height);
bd.draw(myCanvas);
varba:ByteArray=newPNGEncoder().encode(bd);
nc.call("ByteStream.Services.ByteStreamService.UploadImage",rs,ba);
}
小提示
在进行Flex开发中,能够通过编程实现的最好通过编程实现,尽量少的去使用Flex组件,这样可以有效的给Flex程序瘦身。
服务器端将传递过去的ByteArray数据返回到了客户端,客户端接收到这些数据通过处理将字节数组转化为显示对象后显示到界面上。
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->privatefunctiononResult(result:ByteArray):void
{
varloader:Loader=newLoader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderCompleteHandler);
loader.loadBytes(result);
}
privatefunctionloaderCompleteHandler(event:Event):void
{
varloader:Loader=(event.targetasLoaderInfo).loader;
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loaderCompleteHandler);
varpictureHolder:UIComponent=newUIComponent();
pictureHolder.addChild(loader);
this.resultImage.width=myCanvas.width;
this.resultImage.height=myCanvas.height;
this.resultImage.addChild(pictureHolder);
}
privatefunctiononFault(event:Object):void
{}
到此就完成了图片上传功能,下面是完整的Flex客户端代码:
Flex端完整代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"fontSize="12"creationComplete="init()">
<mx:Script>
<![CDATA[
importmx.core.UIComponent;
importmx.controls.Alert;
importmx.events.ResizeEvent;
importmx.graphics.codec.PNGEncoder;
importmx.rpc.events.FaultEvent;
importmx.rpc.events.ResultEvent;
privatevarisDrawing:Boolean=false;
privatevarx1:int;
privatevary1:int;
privatevarx2:int;
privatevary2:int;
privatevardrawColor:uint;
privatevarnc:NetConnection;
privatevarrs:Responder;
privatefunctioninit():void
{
rs=newResponder(onResult,onFault);
nc=newNetConnection();
nc.connect("http://localhost:2453/FluorineFxWeb/Gateway.aspx")
nc.client=this;
}
privatefunctiononSaveImage(event:MouseEvent):void
{
varbd:BitmapData=newBitmapData(myCanvas.width,myCanvas.height);
bd.draw(myCanvas);
varba:ByteArray=newPNGEncoder().encode(bd);
nc.call("ByteStream.Services.ByteStreamService.UploadImage",rs,ba);
}
privatefunctiononResult(result:ByteArray):void
{
varloader:Loader=newLoader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderCompleteHandler);
loader.loadBytes(result);
}
privatefunctionloaderCompleteHandler(event:Event):void
{
varloader:Loader=(event.targetasLoaderInfo).loader;
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loaderCompleteHandler);
varpictureHolder:UIComponent=newUIComponent();
pictureHolder.addChild(loader);
this.resultImage.width=myCanvas.width;
this.resultImage.height=myCanvas.height;
this.resultImage.addChild(pictureHolder);
}
privatefunctiononFault(event:Object):void
{}
privatefunctiondoMouseDown():void
{
x1=myCanvas.mouseX;
y1=myCanvas.mouseY;
isDrawing=true;
}
privatefunctiondoMouseMove():void
{
x2=myCanvas.mouseX;
y2=myCanvas.mouseY;
if(isDrawing)
{
myCanvas.graphics.lineStyle(2,drawColor);
myCanvas.graphics.moveTo(x1,y1);
myCanvas.graphics.lineTo(x2,y2);
x1=x2;
y1=y2;
}
}
privatefunctiondoMouseUp():void
{
isDrawing=false;
}
//清空画图板
privatefunctiononErase(event:MouseEvent):void
{
myCanvas.graphics.clear();
}
]]>
</mx:Script>
<mx:Panelx="10"y="10"width="348"height="306"layout="absolute">
<mx:Canvasx="10"y="10"width="315"height="210"id="myCanvas"
mouseDown="doMouseDown()"
mouseMove="doMouseMove()"
mouseUp="doMouseUp()">
</mx:Canvas>
<mx:ControlBar>
<mx:ColorPickerchange="drawColor=event.target.selectedColor"/>
<mx:Buttonlabel="清除"click="onErase(event)"/>
<mx:Buttonlabel="保存"click="onSaveImage(event)"/>
</mx:ControlBar>
</mx:Panel>
<mx:Imagex="382"y="10"id="resultImage"/>
</mx:Application>
本文示例程序下载:ByteStreamDemo.rar
分享到:
相关推荐
使用FluorineFx中的字节数组(ByteArray)实现图片上传
flex与.net配置,使用的是fluorinefx
Flex与.NET互操作系列文章代码(fluorineFxVR、fluorineFxSO,fluorineFxServerRPC,fluorineFxChat)
使用FluorineFx.Net开发的每一个实时通讯功能应用都拥有一个应用程序适配器(ApplicationAdapter),用来管理整个实时通讯应用的生命周期,以及接受和拒绝客户端的连接等。
FluorineFx.NET提供了完善的RPC(Remote Procedure Call)功能,无论是通过Flash还是Flex开发的客户端应用(.swf)都可以非常简单方便的采用RPC的方式调用.NET的服务器端方法
关于远程访问在本系列文章中陆续的写了不少示例了,本文没有准备深入的去探讨,为了巩固FluorineFx网关的学习和使用。
远程共享对象(Remote Shared Objects) 可以用来跟踪、存储、共享以及做多客户端的数据同步操作。只要共享对象上的数据发生了改变,将会把最新数据同步到所有连接到该共享对象的应用程序客户端。
本文主要介绍使用FluorineFx.Net来实现视频录制与视频回放,FluorineFx如同FMS一样,除了有AMF通信,RTMP协议,RPC 和远程共享对象外,它同样具备视频流服务的功能。
Flex与.NET交互。 第三方代码FluorineFx 传递一个简单的对象。 Flex前段不需要配置。
Flex和.NET协同开发利器FluorineFx
在本系列前面几篇文章中分别介绍了通过WebService、HTTPService、URLLoader以及FielReference等组件或类来完成Flex与.NET服务端的通信的相关知识点。
FluorineFX是一个开源库,提供了一种在.NET framework下对Flex/Flash的远程过程调用,Flex数据服务和实时数据的使用技术。
fluorinefx与asp.net结合flex连接数据库
在VS2010上用FluorineFX和Flex 4开发项目(asp.net): 使用VS2010和FluorineFX利用ASP.NET与flex 4进行联合开发,环境搭建教程!
Flex与ASP.Net通信对数据库的操作,通信方式FluorineFx, 环境:vs2008+flex3.0 数据库:sqlserver2005
使用VS2010和FluorineFX利用ASP.NET与flex 4进行联合开发,环境搭建教程
asp.net通过FluorineFx传DataTable到Flex asp.net通过FluorineFx传DataTable到Flex
FluorineFx.NET的认证(Authentication )与授权(Authorization)和ASP.NET中的大同小异,核实用户的身份既为认证,授权则是确定一个用户是否有某种执行权限
前台flex采用的是puremvc框架。 通过fluorinefx跟asp.net交互对数据库进行操作
Flex_FluorineFx_ASP.NET