前几天一位朋友问我一个问题,他说:“我用HTTP接口或是WebService接口可以实现图片上传功能,那么用FluorineFx如何实现图片上传功能呢?”,其实仔细看官方文档和示例程序的自己都可以找到答案,实现上传可以有很多种实现,这里我以官方所提供是示例为基础稍加改动,通过ByteArray类实现图片上传。
首先建立FluorineFx库和网站,在远程服务器类里添加一个处理文件上传的方法,详细代码如下:
namespace
ByteStream.Services
{
[RemotingService]
public
class
ByteStreamService
{
public
ByteArray UploadImage(ByteArray ba)
{
MemoryStream ms
=
new
MemoryStream(ba.GetBuffer());
Image img
=
Bitmap.FromStream(ms);
Bitmap newImage
=
new
Bitmap(img);
MemoryStream tempStream
=
new
MemoryStream();
newImage.Save(tempStream, System.Drawing.Imaging.ImageFormat.Png);
string
path
=
HttpContext.Current.Server.MapPath(
"
UpLoad/ByteArray.png
"
);
FileStream fs
=
new
FileStream(path, FileMode.Create);
tempStream.WriteTo(fs);
fs.Close();
ByteArray result
=
new
ByteArray(tempStream);
return
result;
}
}
}
处理图片上传的方法通过把flex客户端传递来的字节数组包装为内存流,然后通过写文件的形式将图片保存到指定的目录下。示例中提供了一个画图板,用户可以通过选择颜色自画不同的图象,然后保存到服务器上指定的目录。画图板的实现是根据鼠标按下的移动路线做的,代码如下:
private
function doMouseDown():
void
{
x1
=
myCanvas.mouseX;
y1
=
myCanvas.mouseY;
isDrawing
=
true
;
}
private
function doMouseMove():
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;
}
}
private
function doMouseUp():
void
{
isDrawing
=
false
;
}
//
清空画图板
private
function onErase(
event
:MouseEvent):
void
{
myCanvas.graphics.clear();
}
在官方实例中是使用的RemoteObject实现的,这里我将其修改为通过编程实现AMF通信实现当程序初始化的时候就建立与FluorineFx网关的AMF通信连接:
private
var nc:NetConnection;
private
var rs:Responder;
private
function init():
void
{
rs
=
new
Responder(onResult,onFault);
nc
=
new
NetConnection();
nc.connect(
"
http://localhost:2453/FluorineFxWeb/Gateway.aspx
"
)
nc.client
=
this
;
}
在Flex客户端通过当前网络连接的call()方法实现远程方法调用,并指定通过Responder来处理服务器端方法的返回结果。
private
function onSaveImage(
event
:MouseEvent):
void
{
var bd:BitmapData
=
new
BitmapData(myCanvas.width,myCanvas.height);
bd.draw(myCanvas);
var ba:ByteArray
=
new
PNGEncoder().encode(bd);
nc.call(
"
ByteStream.Services.ByteStreamService.UploadImage
"
,rs,ba);
}
小提示
在进行Flex开发中,能够通过编程实现的最好通过编程实现,尽量少的去使用Flex组件,这样可以有效的给Flex程序瘦身。
服务器端将传递过去的ByteArray数据返回到了客户端,客户端接收到这些数据通过处理将字节数组转化为显示对象后显示到界面上。
private
function onResult(result:ByteArray):
void
{
var loader:Loader
=
new
Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderCompleteHandler);
loader.loadBytes(result);
}
private
function loaderCompleteHandler(
event
:Event):
void
{
var loader:Loader
=
(
event
.target
as
LoaderInfo).loader;
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loaderCompleteHandler);
var pictureHolder:UIComponent
=
new
UIComponent();
pictureHolder.addChild(loader);
this
.resultImage.width
=
myCanvas.width;
this
.resultImage.height
=
myCanvas.height;
this
.resultImage.addChild(pictureHolder);
}
private
function onFault(
event
:Object):
void
{}
到此就完成了图片上传功能,下面是完整的Flex客户端代码:
<?
xml version
=
"
1.0
"
encoding
=
"
utf-8
"
?>
<
mx:Application xmlns:mx
=
"
http://www.adobe.com/2006/mxml
"
layout
=
"
absolute
"
fontSize
=
"
12
"
creationComplete
=
"
init()
"
>
<
mx:Script
>
<!
[CDATA[
import mx.core.UIComponent;
import mx.controls.Alert;
import mx.events.ResizeEvent;
import mx.graphics.codec.PNGEncoder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private
var isDrawing:Boolean
=
false
;
private
var x1:
int
;
private
var y1:
int
;
private
var x2:
int
;
private
var y2:
int
;
private
var drawColor:
uint
;
private
var nc:NetConnection;
private
var rs:Responder;
private
function init():
void

{
rs = new Responder(onResult,onFault);
nc = new NetConnection();
nc.connect("http://localhost:2453/FluorineFxWeb/Gateway.aspx")
nc.client = this;
}
private
function onSaveImage(
event
:MouseEvent):
void

{
var bd:BitmapData = new BitmapData(myCanvas.width,myCanvas.height);
bd.draw(myCanvas);
var ba:ByteArray = new PNGEncoder().encode(bd);
nc.call("ByteStream.Services.ByteStreamService.UploadImage",rs,ba);
}
private
function onResult(result:ByteArray):
void

{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderCompleteHandler);
loader.loadBytes(result);
}
private
function loaderCompleteHandler(
event
:Event):
void

{
var loader:Loader = (event.target as LoaderInfo).loader;
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loaderCompleteHandler);
var pictureHolder:UIComponent = new UIComponent();
pictureHolder.addChild(loader);
this.resultImage.width = myCanvas.width;
this.resultImage.height = myCanvas.height;
this.resultImage.addChild(pictureHolder);
}
private
function onFault(
event
:Object):
void

{}
private
function doMouseDown():
void

{
x1 = myCanvas.mouseX;
y1 = myCanvas.mouseY;
isDrawing = true;
}
private
function doMouseMove():
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;
}
}
private
function doMouseUp():
void

{
isDrawing = false;
}
//
清空画图板
private
function onErase(
event
:MouseEvent):
void

{
myCanvas.graphics.clear();
}
]]
>
</
mx:Script
>
<
mx:Panel x
=
"
10
"
y
=
"
10
"
width
=
"
348
"
height
=
"
306
"
layout
=
"
absolute
"
>
<
mx:Canvas x
=
"
10
"
y
=
"
10
"
width
=
"
315
"
height
=
"
210
"
id
=
"
myCanvas
"
mouseDown
=
"
doMouseDown()
"
mouseMove
=
"
doMouseMove()
"
mouseUp
=
"
doMouseUp()
"
>
</
mx:Canvas
>
<
mx:ControlBar
>
<
mx:ColorPicker change
=
"
drawColor = event.target.selectedColor
"
/>
<
mx:Button label
=
"
清除
"
click
=
"
onErase(event)
"
/>
<
mx:Button label
=
"
保 存
"
click
=
"
onSaveImage(event)
"
/>
</
mx:ControlBar
>
</
mx:Panel
>
<
mx:Image x
=
"
382
"
y
=
"
10
"
id
=
"
resultImage
"
/>
</
mx:Application
>
本文示例程序下载:
ByteStreamDemo.rar