Flex 多文件上传组件

1. 原理

flex文件上传有两种方式：一是利用FileReference类来完成，直接提交给后加Servlet；而是利用RemoteObject上传，上传的过程要把图片的二进制数组传递到后台进行保存。这里多文件上传选择第一种方法。

2. 步骤

封装多文件上传类。MultiFileUpload.as

封装多文件上传的控制类 FlexFileUpload_cb.as

封装后台文件保存类 UploadServlet.java

将多文件上传组件配置到页面中

 

 

<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/mx"
 creationComplete="initApp();canvas1_creationCompleteHandler(event)"  width="98%" height="100%" >
	<fx:Script source="FlexFileUpload_cb.as"/>

	protected function canvas1_creationCompleteHandler(event:FlexEvent):void
	{
		//设置附件上传地址
		this.uploadDestination = "http://localhost:8817/OAPM-Web/uploadServletFlex?desPath=pro";
	}

 

 

<mx:Panel layout="absolute" width="500" height="180" headerHeight="0">
	<mx:DataGrid id="filesDG" left="0" right="0" bottom="30" top="5" />
	<mx:ProgressBar id="progressbar" labelPlacement="center" trackHeight="15" left="0" right="0" bottom="5" height="20"/>
	<mx:ControlBar>
		<mx:Spacer width="100%"/>
		<mx:HBox>
			<mx:Button label="浏览" id="browseBTN"/>
			<mx:Button label="上传" id="upload_btn"/>
			<mx:Button label="删除" id="delButton"/>
			<mx:Button label="清空所有" id="clearButton"/>
		</mx:HBox>
	</mx:ControlBar>
</mx:Panel>

 

 

3. 实例

    发送信息，比如通知。

3. 附件

MultiFileUpload.as

FlexFileUpload_cb.as

UploadServlet.java