Flash 업로더 제작
페이지 정보
작성자 MintState 댓글 0건 조회 13,326회 작성일 10-02-16 10:57본문
Flash 업로더 제작
출처 : http://www.lovelgw.com/Blog/119
HTML만을 이용해서 멀티 업로드를 이용하기에는 문제가 있고 Ajax를 이용해서 업로드를 구현한다는것은 보안상 차단된 방법이기때문에 Flash 를 이용해서 만드는 방법이다.
우선 플래시에서 버튼을 하나 만든다.
버튼의 인스턴스 명은 btn 으로 설정하고 저장한다.
btn인스턴스로 클래스 안에서 버튼을 컨트롤 할 수 있다.
플래시를 파일을 제작한 후에 업로드를 수행하면 업로드를 실제로 수행할 PHP파일에 POST (multipart/form-data) 형식으로 파일을 전송한다.
그에 따른 PHP파일은 직접 제작을 하여야 하며 업로드 후 성공 실패 에 대한 처리 Javascript 호출에 따른 사용자 UI등은 직접 제작해야 한다.
여기서 보여주는 내용은 플래시로 업로드 하기 위한 부분을 보여주는 부분이다.~
출처 : 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등은 직접 제작해야 한다.
여기서 보여주는 내용은 플래시로 업로드 하기 위한 부분을 보여주는 부분이다.~
|
댓글목록
등록된 댓글이 없습니다.