flex3.5 批量上传图片+预览

最近做个图片上传 用flex? 预览 上传

?项目用flex 3.5 SDK? 但是要想上传前预览图片 切记flashPlayer要 10以上 （项目配置中有） 当然了 还有一些用JS获取文件路径 ? 传给flex的办法但是个人感觉有点麻烦况且现在的大部分客户端 装的FLASH Player 版本都高于10 应该没有问题。

1。首先是图片预览列表用 TileList控件? itemRenderer指定渲染器（就是数据的展示样式）? Photo.mxml代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
		   width="110" height="128" horizontalAlign="center" 
		   verticalAlign="middle" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			[Bindable]
			private var _file:FileReference;
			protected function init():void
			{   _file=data.file as FileReference;			
				_file.addEventListener(ProgressEvent.PROGRESS,pbProgress);
			//	_file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,complete);
			}
           
			private function pbProgress(event: ProgressEvent): void
			{
				pb.setProgress(event.bytesLoaded,event.bytesTotal);
			}	
			private function complete(event: DataEvent): void
			{
			 	
			}
			
		]]>
	</mx:Script>
	<mx:Image  width="90" height="90" source="{data.file.data}" x="10" y="10"/>
	<mx:Label  text="{data.file.name}" width="90" x="10" y="108"/>
	<mx:ProgressBar id="pb" verticalCenter="32" width="90" labelPlacement="center" 
					mode="manual" label="%3%%"  minimum="0" maximum="100" textAlign="center"  
					x="10" height="10" fontSize="10" alpha="1.0" />	
	
	
	
</mx:Module>

实现预览上传代码：uploadPic.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" 
				minHeight="600" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import com.pic.Photo;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.Image;
			import mx.events.FlexEvent;
			import mx.events.ListEvent;
			import mx.events.ResizeEvent;
			import mx.managers.PopUpManager;

			private var file:FileReference; //要上传的文件
			private var fileList:FileReferenceList; //选择图片的文件列表	
			private var isClosed:Boolean=false;//判断弹出的图片是否关闭
			private var img:Image;//弹出的大图
			private var imgList:ArrayCollection=new ArrayCollection();//待上传图片列表
			private var j:int=0;//load回调函数次数
			private var selecetedNum:int=-1;//被选中的序号
			private var isUpload:Boolean=false;//是否已经上传
			public function init():void{
				fileList = new FileReferenceList();  //创建对象
				fileList.addEventListener(Event.SELECT,onSelect);//选择 监听器 
				photoList.dataProvider=imgList;//图片预览
				
			}
			//---------------------------文件上传部分---------------------------------------------//	
			private function select(): void{   
				var imageTypes:FileFilter = new FileFilter("Images (*.jpg,*.jpeg,*.png)","*.jpg;*.jpeg;*.png");   
				var allTypes:Array = new Array(imageTypes);  
				fileList.browse(allTypes);//打开资源管理器时显示的类型
			}   
			/**
			 * 选择文件事件回调函数
			 * */
			private function onSelect(e: Event): void{  
				if(isUpload){
					imgList.removeAll();//清空上传过的图片列表
					photoList.itemRenderer=new ClassFactory(com.pic.Photo);//重新指定渲染器（重新NEW）
				}
				isUpload=false;//重置上传状态标识
				j=0;//load回调函数的执行次数
				for(var i:int=0;i<fileList.fileList.length;i++)
				{   
					file=fileList.fileList[i] as FileReference;
					//为每个FileReference添加监听器
					file.addEventListener(Event.COMPLETE,completeHandle);
					file.load();	
				}
			}   
			/*
			* load回调方法--要等到 fileList遍历完才一次性回调
			*/
			private function completeHandle(event:Event):void{  
				if(j==fileList.fileList.length-1&&!isUpload)
					creatImgList();
				j++;
				
			}   
			private function creatImgList():void{//保存待上传图片到imgList列表
				for(var i:int=0;i<fileList.fileList.length;i++)
				{   
					file=fileList.fileList[i] as FileReference;
					var obj:Object=new Object;
					obj.file=file;
					obj.describe="图片"+i+"描述";
					imgList.addItem(obj);//添加到待图片列表
				}
			}
			
		//----------------------------------图片弹出部分----------------------------------------//	
			protected function photoList_itemDoubleClickHandler(event:ListEvent):void
			{
				img = new Image(); 
				// img.width = 300; 
				// img.height = 300; 
				img.maintainAspectRatio = true; 
				img.addEventListener(Event.COMPLETE,image_complete); 
				img.addEventListener(ResizeEvent.RESIZE,image_resize); 
				img.addEventListener(MouseEvent.CLICK,image_click); 
				img.source = event.itemRenderer.data.file.data; 
				img.setStyle("addedEffect",image_addedEffect); 
				img.setStyle("removedEffect",image_removedEffect); 
				isClosed=false;//是否关闭设置为false
				PopUpManager.addPopUp(img,this,true); 
			}
			
			private function image_click(evt:MouseEvent):void {
				isClosed=true;//关闭显示的大图
				PopUpManager.removePopUp(evt.currentTarget as Image); 
			} 
			
			private function image_resize(evt:ResizeEvent):void {
				if(!isClosed){
					PopUpManager.centerPopUp(evt.currentTarget as Image); 
				}
			} 
			
			private function image_complete(evt:Event):void { 
				PopUpManager.centerPopUp(evt.currentTarget as Image); 
			} 
			//---------------------------图片弹出部分结束----------------------------------------//	
			/*
			*删除选中图片 
			*/
			protected function deletePhoto():void
			{    
				var array:Array=photoList.selectedIndices;
				if(array.length>0){
					array.sort(Array.NUMERIC);//按数字升序排序 
					for(var i:int=0;i<array.length;i++)
					{
						imgList.removeItemAt(array[i]-i);//从待上传列表中移出
					}
					photoName.text="";
					photoSize.text="";
					describe.text="";
				}
			}
			/*
			* 显示选中条目的详细信息
			*/
			protected function photoList_itemClickHandler(event:ListEvent):void
			{
				var isSelected:Boolean=photoList.isItemSelected(event.itemRenderer.data);
				if(isSelected){
					photoName.text=event.itemRenderer.data.file.name;//名称
					photoSize.text=event.itemRenderer.data.file.size/1024+" KB";//大小
					describe.text=event.itemRenderer.data.describe;//描述
					selecetedNum=photoList.selectedIndex;//被选中的序号
					if(photoList.selectedIndices.length>1)
					{
						describe.editable=false;//多选时描述不可编辑
					}
					else{
						describe.editable=true;
					}
				}
			}
			/*
			* 上传imgList中的图片
			*/
			protected function upload():void
			{   if(isUpload){
				Alert.show("列表中图片已经上传完毕，请重新选择！");
			}else{
				var k:int=0;
				up();
				function up():void//实现上传
				{
					file=imgList[k].file;
					file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadComplete);
					var request: URLRequest = new URLRequest("http://127.0.0.1:8080/FileUp/upload");//临时
					file.upload(request);
				}
				/*
				* 文件上传成功回调函数
				*/
				function uploadComplete(event: DataEvent): void
				{   
					trace(k+"=="+imgList[k].describe);
					trace(k+"--"+event.text);
					k++;
					if(k<imgList.length)
						up();//调用上传
				}
				isUpload=true;//全部上传完后已上传标识=true
			}
			}
			/*
			* 描述改变回调函数
			*/
			protected function describe_changeHandler(event:Event):void
			{
				imgList[selecetedNum].describe=this.describe.text;//当前描述添加到列表中
			}
			
		]]>
	</mx:Script>
	
	<mx:WipeDown id="image_addedEffect" startDelay="100" /> 
	
	<mx:Parallel id="image_removedEffect"> 
		<mx:Zoom /> 
		<mx:Fade /> 
	</mx:Parallel> 
	<mx:TileList x="10" y="10" id="photoList" 
				 columnCount="4" rowCount="3" borderThickness="9"
				 itemRenderer="com.pic.Photo"  
				 allowMultipleSelection="true" 
				 themeColor="#64BAF1"
				 itemDoubleClick="photoList_itemDoubleClickHandler(event)"
				 itemClick="photoList_itemClickHandler(event)"
				 width="456" height="431"></mx:TileList>
	<mx:Grid x="491" y="34" width="295">
		<mx:GridRow width="100%" height="100%">
			<mx:GridItem width="52" height="100%">
				<mx:Label text="名称："/>
			</mx:GridItem>
			<mx:GridItem width="100%" height="100%">
				<mx:Label text="" id="photoName" width="229"/>
			</mx:GridItem>
		</mx:GridRow>
		<mx:GridRow width="100%" height="100%">
			<mx:GridItem width="54" height="100%">
				<mx:Label text="大小："/>
			</mx:GridItem>
			<mx:GridItem width="100%" height="100%">
				<mx:Text text="" id="photoSize"/>
			</mx:GridItem>
		</mx:GridRow>
		<mx:GridRow width="100%" height="100%">
			<mx:GridItem width="46" height="100%">
				<mx:Label text="描述："/>
			</mx:GridItem>
			<mx:GridItem width="100%" height="100%">
				<mx:TextArea height="62" width="100%" id="describe" change="describe_changeHandler(event)"/>
			</mx:GridItem>
		</mx:GridRow>
	</mx:Grid>
	<mx:Button x="491" y="340" label="选择上传图片" click="select()"/>
	<mx:Button x="491" y="379" label="删除选中图片" click="deletePhoto()"/>
	<mx:Button x="491" y="419" label="上传图片" click="upload()"/>
	
</mx:Application>