Flex与.NET互操作(十五)：使用FluorineFx中的字节数组（ByteArray）实现图片上传

isiqi

浏览: 16483708 次
性别:
来自: 济南

最近访客更多访客>>

nison

hellohank

wangyy

devcang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-07 ( 335)
2012-06 ( 252)
2012-05 ( 362)
更多存档...

.net Flex 编程 WebService Adobe

前几天一位朋友问我一个问题，他说：“我用HTTP接口或是WebService接口可以实现图片上传功能，那么用FluorineFx如何实现图片上传功能呢？”，其实仔细看官方文档和示例程序的自己都可以找到答案，实现上传可以有很多种实现，这里我以官方所提供是示例为基础稍加改动，通过ByteArray类实现图片上传。

首先建立FluorineFx库和网站，在远程服务器类里添加一个处理文件上传的方法，详细代码如下：

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客户端传递来的字节数组包装为内存流，然后通过写文件的形式将图片保存到指定的目录下。示例中提供了一个画图板，用户可以通过选择颜色自画不同的图象，然后保存到服务器上指定的目录。画图板的实现是根据鼠标按下的移动路线做的，代码如下：

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通信连接：

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来处理服务器端方法的返回结果。

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数据返回到了客户端，客户端接收到这些数据通过处理将字节数组转化为显示对象后显示到界面上。

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客户端代码：