Flex 利用Socket 实现断点续传

项目中要用到文件上传，文件上传到临时服务器后要显示到页面的附件列表中。当用户点击保存以后文件从临时服务器移动到服务器指定目录中。在该程序中使用读配置文件获取ip地址和port（端口）但是当flex生成swf文件后通过jsp调用文件就会出现问题，问题在后面会描述

 

此文件涉及到调用js的方法，也会在以后的博客中叙述。

主页面mxml页面代码如下：

<?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" 
			   width="380"
			   height="200"
				xmlns:local="*">
	<s:layout>
		<s:VerticalLayout paddingTop="20" horizontalAlign="center"/>
	</s:layout>
	<fx:Declarations>
		<fx:Model id="config" source="socketInfo.xml"/><--读取配置文件-->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
		
		import flash.external.ExternalInterface;
		import flash.net.Socket;
		
		import mx.controls.Alert;
		import mx.utils.StringUtil;
		
		import upload.FinderLargerUpload; 
		
		
		private var fileRef:FileReference ; 
		
		
		public function fileBrowse():void{ 
			fileRef = new FileReference(); 
			fileRef.addEventListener(Event.SELECT, function select(){
				setValueBtnAndBar();
				fileRef.load();
				uploadLabel.text  =  "加载文件信息，请稍后...." 
		}); 
		fileRef.addEventListener(Event.COMPLETE,function onComplete(){ 
			uploadLabel.text = "文件信息加载完成"; 
			message.text =  fileRef.name; 
			doUpload.enabled = true; 
			doPause.enabled = true;
			}); 
			this.fileRef.browse(); 
		} 
		//设置上传和停止按钮的可见 设计progressBar的可见和值
		private function setValueBtnAndBar():void{
			bar.setProgress(0,100);
			bar.visible = false;
			doUpload.enabled= false;
			doPause.enabled =false;
			message.text="";
			fileComment.text ="";
		}
		var uploadFile:FinderLargerUpload;
		private function toUpload():void{ 
			if(fileRef == null || fileRef.data == null){ 
				fileBrowse(); 
				return; 
			} 
			if(fileComment.text == null || StringUtil.trim(fileComment.text) ==""){
				Alert.show("请填写备注");
				fileComment.getFocus();
				return;
			}
			uploadFile = new FinderLargerUpload(fileRef,fileComment.text); 
		/* 	uploadFile.setHost("127.0.0.1");
			uploadFile.setPort(1234);  */
	 		uploadFile.setHost(config.ip);
			uploadFile.setPort(int(config.port));
			uploadFile.doUpload(bar , setSuccess);
		} 
		
		private function pauseUpload():void{
			uploadFile.close();
		}
		private function setSuccess():void{ 
			ExternalInterface.call("setUploadFileName",fileRef.name);
			uploadLabel.text = "上传成功" 
			doUpload.enabled= false;
			doPause.enabled =false;
		} 
		private function progressBar_complete(evt:Event):void { 
			//向js传信息
			initApp();
			//调用写入session消息
			callJs();
		}  

		public function myFunc():String {
			return fileRef.name +"/" + fileRef.size + "/" +fileComment.text + "/" + fileRef.type;
		}
		public function initApp():void {
			ExternalInterface.addCallback("myFlexFunction",myFunc);
		}
		public function callJs():void{
			var flexToJs:String = ExternalInterface.call("callAction","writeSession");
		}
		]]>
	</fx:Script>
	<mx:VBox height="60%" width="60%" verticalAlign="middle"
			 horizontalAlign="center">
		<mx:HBox width="100%" id="hbox2" verticalAlign="middle">
			<mx:Label text="选择文件:" id="uploadLabel" width="160" height="20" fontSize="12"
					  fontWeight="normal"/>
			<mx:HBox width="72%" horizontalAlign="right" verticalAlign="middle">
				<mx:Button id="uploadds" label="浏览"  click="fileBrowse()" width="58" fontSize="12"/> 
			</mx:HBox>
		</mx:HBox>
		<mx:HBox width="100%">
			<mx:Label text="文件名：" width="80" height="20" fontSize="12" fontWeight="normal"/>
			<mx:TextInput id="message" width="80%" />
		</mx:HBox>
		<mx:HBox width="100%">
			<mx:Label text="备注 :" width="80" height="20" fontSize="12" fontWeight="normal"/>
			<mx:TextArea id="fileComment" width="80%"/>
		</mx:HBox>
		<mx:ControlBar id="controlbar1" width="100%" horizontalAlign="right">
			<mx:HBox height="28" width="80%" horizontalAlign="right">
				<mx:Button id="doUpload" label="上传" width="64" click="toUpload()" fontSize="12"/>
				<mx:Button id="doPause" label="取消"
						   click="pauseUpload()" width="58"
						   fontSize="12"/>
			</mx:HBox>
		</mx:ControlBar>
		<mx:HBox width="80%" horizontalAlign="left" verticalAlign="middle"
				 height="17">
			<mx:ProgressBar id="bar" labelPlacement="center" x="120" y="102" visible="false" minimum="0"
							complete="progressBar_complete(event);"	maximum="100" direction="right"	mode="manual"/> 
		</mx:HBox>
	</mx:VBox>
	
</s:Application>

关于FLex与js交互部分内容在后面博客中叙述

FlexUpload\flex_src\upload 中FinderLargerUpload.as文件

package upload
{
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.net.FileReference;
	import flash.net.Socket;
	
	import mx.controls.Alert;
	import mx.controls.ProgressBar;
	
	
	public class FinderLargerUpload
	{
		
		private var socket:Socket ;      
		private var fileRef:FileReference ; 
		private var progressBar:ProgressBar; 
		private var status:int = 0;//上传成功状态 
		private var successMethod:Function; 
		
		
		
		private var uploadCompletedMethod:Function;
		
		private var host:String="127.0.0.1";
		
		private var port:int=80;
		
		
		public function getStatus():int{ 
			return status; 
		} 
		
		public function setStatus():void{ 
			status = 1; 
			successMethod.call(); 
		} 
		
		public function setHost(pHost:String):void{
			this.host = pHost;
		}
		
		public function setPort(pPort:int):void{
			
			this.port = pPort;
		}
		
		public function FinderLargerUpload(fileRef:FileReference,comment:String){ 
			socket = new Socket; 
			this.fileRef = fileRef; 
			var scope = this; 
			//监听是否连接     
			socket.addEventListener(Event.CONNECT,function conn(){ 
				var temp:FileReference = scope.fileRef; 
				//发送名称   
				socket.writeUTF(temp.name); 
				socket.flush(); 
				//发送备注
				socket.writeUTF(comment);
				socket.flush();
				//文件大小  
				try{ 
					socket.writeUTF(String(temp.data.length));   
				}catch(e:Error){ 
					Alert.show(e.message); 
					//Alert.show(e.getStackTrace()); 
				} 
				
				socket.flush(); 
				
			});    
			
			
			//监听接受数据   
			socket.addEventListener(ProgressEvent.SOCKET_DATA,function receiveData():void{ 
				
				//已上传大小   
				var len:String = socket.readUTF(); 
				if(len == "0"){ 
					if(fileRef.data.length < 1024){ 
						socket.writeBytes(fileRef.data);   
					}else{ 
						socket.writeBytes(fileRef.data,0,1024);  
					}   
					socket.flush();   
				}else{ 
					if((fileRef.data.length - uint(len)) > 1024){ 
						socket.writeBytes(fileRef.data,uint(len),1024);   
						socket.flush(); 
					}else{ 
						socket.writeBytes(fileRef.data,uint(len), fileRef.data.length - uint(len)); 
						socket.flush(); 
						setStatus(); 
					}   
					
				}   
				var currPos:Number = getProcess(uint(len),fileRef.data.length);
				progressBar.setProgress(currPos,100); 
				progressBar.label= (currPos/100)*100 +"%";
				
			});  
			
			socket.addEventListener(Event.CLOSE,function close():void{
			});
		} 
		
		private function getProcess(len:int , length:int):int{ 
			var result:int ; 
			if(length - len < 1024){ 
				result = 100; 
			}else{ 
				result = int(uint(len) / fileRef.data.length * 100);         
			} 
			return result; 
		} 
		
		public function doUpload(bar , fn){ 
			progressBar = bar; 
			successMethod = fn; 
			progressBar.visible = true; 
			socket.connect(host,port); //连接服务器  
		} 
		
		public function getSocket():Socket{
			return this.socket;
		}
		
		//关闭socket,停止上传
		public function close():void{
			this.socket.close();
		}
		
	}
}

actionscript文件就这么多页面样式如下：

考虑到内容太多大家看着也烦，所以java代码在下篇博客中展示。这里感谢东哥和csdn一位网友是他们的文章让我实现flex的断点续传，虽然还有一些问题但是不影响断点续传功能

http://blog.csdn.net/shierqu/article/details/7585792   东哥的博客，非常感谢东哥的支持。

http://m.blog.csdn.net/blog/wuhualong1314/8806258