Flex中使用RemoteObject实现图片上传功能
最近看到一个通过BlazeDS中的RemoteOjbect通讯方式来进行上传图片功能，感觉不错，网上大部分都是用flex + java servlet 来实现的。如：http://www.riameeting.com/node/210
而这个感觉更简单，所以就贴了出来，希望能方便大家：
客户端:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
currentState="pre_upload">
<fx:Script>
<![CDATA[
import flash.events.Event;
import flash.net.FileFilter;
import flash.net.FileReference;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private var fileRef:FileReference = new FileReference();
private function pickFile(evt:MouseEvent):void
{
var imageTypes:FileFilter = new FileFilter("图片 (*.jpg, *.jpeg, *.gif,*.png)", "*.jpg; *.jpeg; *.gif; *.png");
var allTypes:Array = new Array(imageTypes);
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(ProgressEvent.PROGRESS, progressHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
try{
fileRef.browse(allTypes);
}catch (error:Error){
trace("Unable to browse for files."+error.toString());
}
}
private function progressHandler(evt:ProgressEvent):void
{
lb_progress.text = " 已上传 " + (evt.bytesLoaded/1024).toFixed(2)+ " K，共 "+ (evt.bytesTotal/1024).toFixed(2) + " K";
var proc: uint = evt.bytesLoaded / evt.bytesTotal * 100;
progress.setProgress(proc, 100);
progress.label= "当前进度: " + " " + proc + "%";
}
private function selectHandler(evt:Event):void
{
currentState = "uploading";
fileRef.load();
}
private function completeHandler(evt:Event):void{
currentState = "post_upload";
upload.uploadFile(fileRef.data,fileRef.name);
image_post_upload.source = fileRef.data;
}
private function returnUpLoadHandler():void
{
currentState = "pre_upload";
}
]]>
</fx:Script>
<fx:Declarations>
<s:RemoteObject id="upload" destination="uploadFile" endpoint="../messagebroker/amf"/>
</fx:Declarations>
<s:states>
<s:State name = "pre_upload"/>
<s:State name = "uploading"/>
<s:State name = "post_upload"/>
</s:states>
<s:Button includeIn="pre_upload" label="从电脑上上传图片" width="119" click="pickFile(event)" horizontalCenter="0" y="64"/>
<mx:ProgressBar id="progress" includeIn="uploading" x="43" y="43" width="153"/>
<s:Label id="lb_progress" includeIn="uploading" x="45" y="10" width="149" height="25"/>
<s:Label id="lb_post_upload" includeIn="post_upload" x="108" y="21" width="124" height="32" fontSize="16" text="upload success!" fontFamily="Arial" color="#3374DE"/>
<s:Button includeIn="post_upload" x="159" y="60" label="返回" click="returnUpLoadHandler()"/>
<mx:Image id="image_post_upload" includeIn="post_upload" x="10" y="10" width="67" height="67"/>
</s:Application>
服务器：
package com.service;
import java.io.File;
import java.io.FileOutputStream;
public class UploadFile {
public void uploadFile(byte[] content, String fileName) throws Exception {
File file = new File("d:" + fileName);
FileOutputStream stream = new FileOutputStream(file);
if (content != null)
stream.write(content);
stream.close();
}
}
RemoteObject-config.xml配置文件：
<destination id="uploadFile">
<properties>
<source>com.service.UploadFile</source>
</properties>
</destination>