Flash 文件上传组件

朋友有个要求是要在页面上上传文件的时候只能选择指定类型(后缀名)的文件，显然<input type=file/>是无能为力的(至少我没有找到办法，想来javascript/DOM也没有这种能力),所以考虑用Flash做一个小组件。
调用方式如下：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		id="upload_swf" width="650" height="220"
		codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
		<param name="movie" value="images/FileUpload.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#76b900" />
		<param name="allowScriptAccess" value="sameDomain" />
//此处向Flash传入自定义变量，注：sessionId是必须的，貌似是Flash的一个Bug
		<param name="FlashVars" value='sessionId=<%=session==null?"":session.getId()%>&uploadPath=datarecover.do&fileFilter=[{"name":"Word", "postFix": "*.doc"},{"name":"CSV File", "postFix": "*.csv"}]'/>
		<embed src="images/FileUpload.swf" quality="high" bgcolor="#76b900"
			width="650" height="220" name="upload_swf" align="middle"
			play="true"
			loop="false"
			quality="high"
			allowScriptAccess="sameDomain"
			type="application/x-shockwave-flash"
			pluginspage="http://www.adobe.com/go/getflashplayer"
//此处向Flash传入自定义变量，注：sessionId是必须的，貌似是Flash的一个Bug	
	FlashVars='sessionId=<%=session==null?"":session.getId()%>&uploadPath=datarecover.do&fileFilter=[{"name":"Excel", "postFix": "*.xls"},{"name":"CSV File", "postFix": "*.csv"}]'>
		</embed>
</object>

源代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp();" width="100%" height="100%" >
	<mx:Script>
	<![CDATA[
		import mx.rpc.events.ResultEvent;
		import mx.collections.ArrayCollection;
	    import mx.controls.Alert;
		import mx.utils.ObjectUtil;
		import flash.events.*;
	    import flash.net.FileReference;
	    import flash.net.URLRequest;
	    import flash.net.FileFilter;
	    import com.adobe.serialization.json.JSON;

	    private var fileRef:FileReference;
	    private var sessionId:String;
	    private var fileFilter:Array;
	    private var uploadPath:String;
	    
	    
        private function initApp():void {
        	sessionId = Application.application.parameters.sessionId;
        	var ff:String = String(Application.application.parameters.fileFilter);
        	fileFilter = JSON.decode(ff) as Array;
        	uploadPath = Application.application.parameters.uploadPath;
            fileRef = new FileReference();
            fileRef.addEventListener(Event.CANCEL, traceEvent);
            fileRef.addEventListener(Event.COMPLETE, completeEvent);
            fileRef.addEventListener(Event.SELECT, selectEvent);
            fileRef.addEventListener(IOErrorEvent.IO_ERROR, traceEvent);
            fileRef.addEventListener(Event.OPEN, traceEvent);
            fileRef.addEventListener(ProgressEvent.PROGRESS, progressEvent);
            fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, traceEvent);
        }
		
		private function traceEvent(event:Event):void {
			//var tmp:String = "";
			//ta.text += tmp + event.type + " event:" + mx.utils.ObjectUtil.toString(event) + "\n" ;
			//ta.verticalScrollPosition += 20;
		}
		
		private function ioErrorEvent(event:IOErrorEvent):void{
			Alert.show("IOError:"+event.type+":" + event.text);
			traceEvent(event);
		}
		
		private function selectEvent(event:Event):void{
			btn_upload.enabled = true;
			traceEvent(event);
			filename.text = fileRef.name;
			progressBar.setProgress(0, 100);
			progressBar.label = "Loading 0%";			
		}
	
		private function progressEvent(event:ProgressEvent):void {
			progressBar.setProgress(event.bytesLoaded, event.bytesTotal);
			traceEvent(event);
		}
	
		private function completeEvent(event:Event):void {
			progressBar.label = "Complete.";
			filename.text += " uploaded";
			traceEvent(event);
			btn_upload.enabled = false;
			btn_cancel.enabled = false;			
		}
		
		private function uploadFile():void {
			var endpoint:String = uploadPath;
			endpoint += ";jsessionid="+sessionId;
			endpoint +="?fileType="+fileRef.type;
			var req:URLRequest = new URLRequest(endpoint);
			req.method = URLRequestMethod.POST;
			fileRef.upload(req, "filedata", false);
			progressBar.label = "Uploading...";		
			btn_cancel.enabled = true;
		}
		
		private function browseFile():void {
			var filters:Array = [];
			for(var i:int = 0; i < fileFilter.length; i++) {
				var filter:Object = fileFilter[i];
		        filters.push(new FileFilter(filter.name, filter.postFix));
			}
			fileRef.browse(filters);
		}
	]]>
	</mx:Script>
	<mx:Panel title="Upload File" width="600" height="170" layout="vertical" horizontalCenter="0">
		<mx:Form height="125" width="572">
			<mx:FormItem label="Selected File:" width="520">
			    <mx:Label id="filename" width="402"/>
			</mx:FormItem>

			<mx:FormItem direction="horizontal" width="520">
				<mx:Button width="80" label="Browse" click="browseFile()" />
				<mx:Button width="80" label="Upload" id="btn_upload" enabled="false" click="uploadFile()" />
				<mx:Button width="80" label="Cancel" id="btn_cancel" enabled="false" click="fileRef.cancel()" />
			</mx:FormItem>
			
			<mx:HRule width="520" tabEnabled="false"/>
			
			<mx:FormItem label="Progress:" width="521">
				<mx:ProgressBar id="progressBar" mode="manual"  width="427"/>
			</mx:FormItem>		
		</mx:Form>		
	</mx:Panel>	
</mx:Application>

评论

2 楼 523276508 2008-11-29  

源码都发上来就好了

1 楼 ntcso 2008-05-23  

我是初学者，请问，能不能做一个全部上纯FLASH的上传，或者是管理文件的，不需要任何HTM，PHP，ASP，等网页文件。直接一个SWF文件！