Flash 업로더 제작
페이지 정보
작성자 MintState 댓글 0건 조회 13,799회 작성일 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등은 직접 제작해야 한다.
여기서 보여주는 내용은 플래시로 업로드 하기 위한 부분을 보여주는 부분이다.~
|
|
댓글목록
등록된 댓글이 없습니다.





Flash 업로더 제작