YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > ETC
검색
멤버이름    오토
비밀번호 
 

Flash 업로더 제작

페이지 정보

작성자 MintState 댓글 0건 조회 13,326회 작성일 10-02-16 10:57

본문

Flash 업로더 제작

출처 : http://www.lovelgw.com/Blog/119

HTML만을 이용해서 멀티 업로드를 이용하기에는 문제가 있고  Ajax를 이용해서 업로드를 구현한다는것은 보안상 차단된 방법이기때문에 Flash 를 이용해서 만드는 방법이다.
우선 플래시에서 버튼을 하나 만든다.



버튼의 인스턴스 명은 btn 으로 설정하고 저장한다.
btn인스턴스로 클래스 안에서 버튼을 컨트롤 할 수 있다.

package {
	import flash.display.MovieClip;	// 무비클립에 포함된 클래스이기때문에 
	import flash.events.*;		// 이벤트 제어
	import flash.net.*;			// 네트웍관련 (URLRequest, URLVariables)
	import flash.external.ExternalInterface;	// 외부 호출을 위해 

	// 클래스 명은 파일이름과 동일 해야 하며 
	// 문서 클래스에 클래시 이름을 넣으면 불러들여진다.
	public class Uploader extends MovieClip { // 무비클립을 상속받는다. 
		// 여러 파일 선택을 위한 FileReferenceList 맴버 변수 
		private var m_FileReferenceList:FileReferenceList;

		// 생성자 
		public function Uploader():void {	// 생성자 
			this.m_FileReferenceList = new FileReferenceList();	// 파일 레퍼런스 맴버 변수에 FileReferenceList 객체 생성
			this.m_FileReferenceList.addEventListener(Event.SELECT, selectHandler);	// 이벤트 핸들러 (선택되었을때 - selectHandler 함수 호출)
			this.m_FileReferenceList.addEventListener(Event.CANCEL, cancelHandler);	// 이벤트 핸들러 (취소되었을때 - cancelHandler 함수 호출)
			btn.addEventListener(MouseEvent.CLICK, onClick);					// 프래임 안에 버튼이 눌러졌을때 onClick 함수 실행
			// btn은 프레임에서 넣었던 버튼의 인스턴스임
		}
		
		// 버튼눌렸을때의 함수 수행
		// AS3 Flash Player 9이상부터 플래시의 호출 없이 외부에서 FileReferenceList 의 Browser 함수를 호출 할수 없다. 
		public function onClick(e:MouseEvent) {
				Browser();
		}
		// 취소 되었을때의 이벤트 핸들러 
		// 이벤트를 잡아서 외부 Javascript 인 BrowserCancle 를 호출함
		public function cancelHandler(event:Event) {
			trace('취소됨');
			ExternalInterface.call('BrowserCancle', null);
		}
		
		// 파일 선택창 열기 
		public function Browser() {
			// FileFilter 객체를 생성하여 FileReferenceList의 browser함수에 전달을 한다. 
			// 선택할 파일들을 제공하여 파일 브라우저에서 원하는 확장자만 선택 할 수 있도록 한다. 
			
			var imagesFilter:FileFilter = new FileFilter("Images (jpg, jpeg, gif, png)", "*.jpg;*.jpeg;*.gif;*.png");
			this.m_FileReferenceList.browse([imagesFilter]);
		}
		// 선택이 완료 되었을때의 함수 
		// 실제적인 업로드가 수행되는 함수 
		private function selectHandler(event:Event) {
		
			var nLength = this.m_FileReferenceList.fileList.length;	// 파일 길이를 가져온다. 
			var strUrl = 'http://testserver/testupload.php';	업로드 를 받아줄 수 있는 URL
			var req:URLRequest;		// URL Request객체 변수 
			var variable:URLVariables;	// URL Variable 객체 변수 
			var fr:FileReference;	// 파일 제어를 위한 File Reference함수 (FileReference의 upload함수 이용하기위해)
			trace('전체 보낼 파일 수 : ' + nLength);	
			var i:uint;
			var strFileName:String = '';

			// 선택된 파일을 외부 Javascript를 호출하여 외부에 알려준다. 
			// 웹 브라우저 상에 선택된 파일을 보여주기 위해서 
			for (i = 0; i < nLength; i++) {
				// 파일이름을 가져온다. 
				// 이때는 FileReference 객체에 선택된 파일을 인자로 넣어주고 name 속성을 참조하면 된다. 
				strFileName = FileReference(this.m_FileReferenceList.fileList[i]).name;
				ExternalInterface.call('FileSelect', strFileName);	// 외부 Javascript 호출 인자로 파일이름을 넘겨준다. 
			}
			
			// 실제적인 파일 업로드 
			for (i = 0; i < nLength; i++) {
				fr = new FileReference(m_FileReferenceList.fileList[i]);	// FileReference 객체에 선택된 파일을 인자로 넘겨준다. 
				req = new URLRequest(strUrl);					// URL 호출을 위해 URL을 넣어준다. 
				variable = new URLVariables();					// POST, multipart-form-data 형식으로 데이터를 전송하기 위해새 객체 생성
				variable.FileIdx = i;						// 파일 순서를 FileIdx 변수로 셋팅
				req.data = variable;							// URL Request 객체의 data 변수에 URLVariable 객체인스턴스를 대입시켜준다.
				req.method = URLRequestMethod.POST;				// 메소드를 설정해준다. 

				// 업로드 파일의 제어는 PHP에서 $_FILES[file]를 이용하면된다.
				fr.upload(req, 'file', false);					// 실제 업로드를 진행시킨다. upload(URLRequest, '변수명', 테스트업로드)
				fr.addEventListener(Event.COMPLETE, uploadHandler);		// 이벤트 핸들러를 설정한다. (완료시 uploadHandler 호출)
				fr.addEventListener(IOErrorEvent.IO_ERROR, uploadError);	// 이벤트 핸들러 설정한다. (I/O 오류시 uploadError 호출)
				fr.addEventListener(ProgressEvent.PROGRESS, progressHandler);	// 이벤트 핸들러를 설정한다. (진행상황마다 progressHandler 호출)
			}
		}
		// 진행상황을 표시하기 위한 함수 
		public function progressHandler(event:ProgressEvent):void {
			var file:FileReference = FileReference(event.target);	// 파일 객체를를 받아 들이기 위해 FileReference에 event.target을 인자로 넣는다.)
			trace(' 진행 : ' +file.name + ' 읽어들임 : ' + event.bytesLoaded + ' 전체 : ' + event.bytesTotal);
			// 파일이름은 file.name
			// 진행Byte는 event.bytesLoaded
			// 전체 Byte는 event.byteTotal
			// 외부에 진행상황을 표시하기 위해 Javascript 의 FileUpload 를 호출 하고 인자로 이름,진행양,전체량을 넣어준다. 
			ExternalInterface.call('FileUpload', file.name,  event.bytesLoaded, event.bytesTotal);
		}
		// 업로드 오류시
		public function uploadError(event:Event):void {
			var file:FileReference = FileReference(event.target);
			trace('업로드 에라 : ' + file.name);
			// FileUploadError 를 호출하고 인자로 파일이름을 넘겨준다.
			ExternalInterface.call('FileUploadError',file.name);
		}
		// 업로드 완료시 
		public function uploadHandler(event:Event):void {
			var file:FileReference = FileReference(event.target);
			trace('업로드 오케이 : ' + file.name);
			// FileUploadOk 를 호출하고 인자로 파일이름을 넘겨준다. 
			ExternalInterface.call('FileUploadOk', file.name);
		}
	}
}


플래시를 파일을 제작한 후에 업로드를 수행하면 업로드를 실제로 수행할 PHP파일에 POST (multipart/form-data) 형식으로 파일을 전송한다.
그에 따른 PHP파일은 직접 제작을 하여야 하며 업로드 후 성공 실패 에 대한 처리 Javascript 호출에 따른 사용자 UI등은 직접 제작해야 한다.
여기서 보여주는 내용은 플래시로 업로드 하기 위한 부분을 보여주는 부분이다.~
첨부 파일
파일 종류: png 2700058961_w450-h298.png (64.3K, 53 views)

댓글목록

등록된 댓글이 없습니다.

Total 71건 1 페이지
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2024, YesYo.com MintState. ™