flex 上传图片 例子

 

 

其实flex 上传图片的 mxml 文件是很好写的，只要知道他的几个监听器就可以了。

 

ImageUpload.mxml

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="library://ns.adobe.com/flex/mx" 
				layout="absolute" fontSize="12" creationComplete="init()"
				xmlns:fx="http://ns.adobe.com/mxml/2009"
				width="456" height="345">
	<fx:Script>
		
		<![CDATA[
			import flash.net.*;
			
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
			import mx.utils.*;
			var _rollBack:String = "";
			private var fileReference:FileReference=new FileReference();
			private var byteArray:ByteArray;
			private var bitmapData:BitmapData;
			private var loader:Loader=new Loader();
			
			private var request:URLRequest; 
			private function init():void
			{               
//				picUpload.addEventListener("ok",uploadsfinished);
				fileReference.addEventListener(Event.COMPLETE,fileReferenceCompleteHandler);
			}
			private function fileReferenceCompleteHandler(e:Event):void
			{
				byteArray = fileReference.data;
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderCompleteHandler);
				loader.loadBytes(byteArray);
			}
			private function loaderCompleteHandler(e:Event):void
			{
				var bitmap:Bitmap = Bitmap(loader.content);
				bitmapData = bitmap.bitmapData;
				img.source = bitmap;
//				Alert.show("bitmap===="+ObjectUtil.toString(img.source));
				
			}
			private function fileReferenceSelectHandler(e:Event):void
			{
				Alert.show("bitmap===="+ObjectUtil.toString(fileReference));
				picName.text=fileReference.name
				fileReference.load();
			}
			private function btnClick():void
			{
				fileReference.browse();
				fileReference.addEventListener(Event.SELECT,fileReferenceSelectHandler);
			}
			
			
			
			
//			public function uploadsfinished(event:Event):void{
//				// this.dispatchEvent(new Event("saveBannerContent"));
//				Alert.show("上传完成");
//			} 
			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				
					if(picName.text!=""){
						_rollBack="ok";
						request=new URLRequest
						request.url="http://192.168.0.211:80/upload"; 
						fileReference.upload(request);
						fileReference.addEventListener(IOErrorEvent.IO_ERROR,errorHandler);//文件失败上传监听事件
						fileReference.addEventListener(Event.COMPLETE,doFileUploadComplete);//文件成功上传监听事件  
						fileReference.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);
						fileReference.addEventListener(HTTPStatusEvent.HTTP_STATUS,httpStatusHandler);
					}else{
						Alert.show("请选择图片","提示信息");
					}
			}
			
			//上传失败处理事件
			private function errorHandler(evt:IOErrorEvent):void{
				Alert.show(evt.text,"上传失败，检查网络");
			}
			//上传成功处理
			private function doFileUploadComplete(evt:Event):void{
				
//				Alert.show(ObjectUtil.toString(evt.));
				Alert.show("上传完成");
			} 
			
			private function onResult(evt:ResultEvent):void{
				Alert.show(ObjectUtil.toString(evt));
			}
			private function securityErrorHandler(event:SecurityErrorEvent):void{
				mx.controls.Alert.show(event.text,"Security Error",0);
			}
			
			private function httpStatusHandler(event:HTTPStatusEvent):void {
				if (event.status != 200){
					mx.controls.Alert.show(event.toString(),"上传错误",0);
				}
			} 
		]]>
		
	</fx:Script>
	
	<mx:VBox width="100%"  horizontalAlign="center">
		
	
		<mx:HBox  horizontalAlign="center"  width="100%">
			
			<mx:Label text="图片"/>
			<mx:TextInput width="201" id="picName"  /> 
			<mx:Button label="选择..." click="btnClick()"/>
			
		</mx:HBox>
		
		<mx:HBox  horizontalAlign="center" width="100%">
			<mx:Image id="img" width="263" height="234"/>
		</mx:HBox >
		
		<mx:HBox  horizontalAlign="center" width="100%">
			<mx:Button label="上传" click="button1_clickHandler(event)"/>
		</mx:HBox>
	</mx:VBox>		
		
	
</mx:TitleWindow>