Flash 기술 문서


플래시에서 다중 업로드의 구현


김정헌


Adobe Korea, User Interface Architect

많
은 플래시 웹사이트에서 플래시 자체적으로 해결 할 수 없는 부분들을 서버사이드 프로그램의 도움을 받아서 해결합니다. 플래시 8
이전의 버전에서는 로컬 컴퓨터에 있는 파일을 업로드 할려면 서버사이드의 도움을 받아서 업로드를 시켜야 했습니다. 하지만 플래시
8 에서는 FileReference class 를 통해 플래시에서 직접 서버에 파일을 업로드 시킬 수 있습니다.

요구사항


이 자습 과정을 수행 할려면 다음과 같은 소프트웨어와 파일을 올릴 서버가 필요합니다.


Macromedia Flash Professional 8
[You must be registered and logged in to see this image.] 시험버전
[You must be registered and logged in to see this image.] 구입
자습서 및 샘플 파일
[You must be registered and logged in to see this image.] multi_Upload.zip (ZIP, 84KB)
사전지식
php 에 대한 약간의 지식
Flash 8 이전의 파일 업로드 구조


플래시 8 이전에서 로컬의 파일을 서버에 업로드를 할 때의 구조는 다음의 과정을 거쳐야 했습니다.

1. 플래시에서 자바스크립트 호출
   
2. 서버사이드 언어에서 파일 업로드
   
3. 파일 업로드 완료시 자바스크립트에서 SetVariable 을 이용하여 완료 이벤트 전달
   
4. watch 로 업로드 완료 이벤트 받음
   

위와 같이 플래시, 자바스크립트, 서버사이드,
자바스크립트, 플래시의 과정을 거쳐야지만 플래시에서 파일을 서버쪽에서 업로드 시킬 수 있었습니다. 또한 완료 이벤트를 알리기
위해 iframe 으로 숨겨둔 frame 을 제작 하여야 했습니다.

이는 상당히 복잡한 과정을 거치고 파일이 업로드 되는 과정을 플래시에서는 표현 할 수 없었기 때문에 플래시 사이트에서 디자인 및 UI 의 입장에서 일관성을 보여주기가 힘들었습니다.

하
지만, 플래시 8 에서는 기본적으로 파일을 업로드 할 수 있는 새로운 FileReference class 를 통해 플래시에서
직접 file 의 업로드가 가능해 졌습니다. 따라서, 플래시 자체에서 파일이 업로드 되는 과정을 보여주는 것이 가능해졌습니다.

플래시에서 업로드는 한 번에 하나의 파일을 선택하여 업로드 할 수 있는 FileReference class 와 한 번에 여러 개의 파일을 선택 할 수 있는 FileReferenceList class 가 있습니다..
여기에서 구현할 것은 한 번에 여러 개를 선택 할 수 있는 다중 업로드를 구현 할 것이기 때문에 FileReferenceList class 를 이용하여 제작을 할 것입니다.

최종적으로는 다음과 같은 기능을 가진 다중 업로드를 플래시에서 구현 할 것 입니다.

• 업로드 되는 파일의 확장자 정의 하기
  
• 업로드 되는 파일의 이름 표시하기
  
• 업로드 되는 과정을 프리 업로딩바로 보여주기
  
• 업로드가 되는 도중에는 플래시 영역에서 반응 막기
  
• 한글로 되어 있는 파일의 이름 업로드
  

업로드 되는 파일의 확장자 정의 하기


파일 업로드를 할 버튼과 파일의 이름을 보여줄 dynamic text 를 스테이지에 만듭니다.

[You must be registered and logged in to see this image.]


그림 1. dynamic text 및 upload 버튼

버튼의 instance name 은 upload_btn , dynamic text 의 instance name 은 filename_txt 로 설정합니다.

업로드 버튼을 누르면 파일열기 탐색창이 화면에 보이게 됩니다. 그 때 파일의 형식을 아래와 같이 사용자가 정의 할 수 있습니다.

Object 에 description 의 속성으로 파일열기 탐색창에서 파일형식에 보여지는 문자열을 보여주고, extension의 속성으로 실제 업로드 가능한 파일 확장자를 설정 합니다.

다음의 코드는 다중 업로드에서 업로드 될 파일 확장자를 설정하는 코드 입니다.

var allTypes:Array = new Array();

var imageTypes:Object = new Object();

// 파일열기 탐색창에서 파일형식에 보여지는 문자열 입니다.

imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";

// 업로드 할 수 있는 파일의 형식 입니다.

imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";

allTypes.push(imageTypes);


위와 같이 형식을 정해주면 upload 버튼을 클릭 했을 때 다음과 같은 모습의 파일열기 탐색창이 보이게 됩니다.

[You must be registered and logged in to see this image.]


그림 2. 파일열기 탐색창


업로드 되는 파일의 이름 표시하기


업로드 버튼을 클릭 하면 파일열기 창을 열 수 있는 browse() 호출을 해야 합니다.

browse() 메쏘드를 호출 할려면 먼저 FileReference 와 FileReferenceList API 를 호출 하여야 합니다.

import flash.net.FileReference;

import flash.net.FileReferenceList;


FileReference 와 FileReferenceList 의 이벤트에는 많은 것들이 있지만, 다중 업로드를 제작하기 위해서 필요한 이벤트는 다음의 4가지 입니다.

• onSelect : 파일 탐색 대화 상자에서 업로드 또는 다운로드할 파일을 선택할 때 호출됩니다. 파일 선택 후 선택한 파일의 파일명을 화면에 보여주고, 최초 업로드 하는 파일을 업로드 합니다.
  
• onOpen : 업로드 또는 다운로드 작업 시작 시 호출됩니다. 작업 시작시 프리 업로딩바를 보여 줍니다.
  
• onProgress : 파일 업로드 또는 다운로드 작업 중 정기적으로 호출됩니다. 업로드할 파일의 현재 업로드 된 용량과 전체 업로드의 용량을 계속 해서 전달 받을 수 있습니다. 따라서 프리 업로딩바의 상태를 보여 줄 수 있습니다.
  
• onComplete : 업로드 또는 다운로드 작업 완료 시 호출됩니다. 하나의
  파일이 업로드가 다되면 또 다른 파일을 업로드 하고, 최종적으로 파일을 업로드 한 수와 선택되었던 파일의 수가 같게 되면 더
  이상 파일을 업로드 하지 않습니다. 또한 마지막 파일이 업로드 된 후 프리 업로딩바를 화면에서 사라지게 합니다.
  

이러한 이벤트들은 FileReferenceList 객체에 addListener 를 통해 등록을 시켜 주어야 합니다.

var fileRef:FileReferenceList = new FileReferenceList();

var upLis:Object = new Object();

fileRef.addListener(upLis);


업로드 되는 파일의 이름을 표시하기 위해서는 onSelect 이벤트가 호출이 될 때 파일의 이름을 전달 받아 텍스트에 표시를 해주면 됩니다.

다음은 업로드 되는 버튼을 클릭 했을 때 파일열기 대화창을 호출하는 코드 입니다.

upload_btn.onRelease = function() {

// 업로드 되는 파일의 인덱스 입니다.

itemUploadIndex = 0;

fileRef.browse(allTypes);

};


여기서 itemUploadIndex 는 다중 선택 되었을 때 하나의 파일씩 업로드가 히기 위한 인덱스 정보 입니다. 대화창을 열 때 위에서 선언한 allTypes 에 의해 파일 확장자가 결정이 됩니다.

onSelect 가 호출이 되면 fileList 라는 속성에 업로드 되는 파일의 정보들이 배열로 저장 되게 됩니다. 따라서 그 배열을 저장할 배열을 미리 선언 합니다.

업로드 되는 파일의 파일이름을 알기 위해서는 fileList의 속성인 name 을 이용하면 됩니다. 여러 개의 파일 이름이기 때문에 중간에 “, “ 의 문자열을 더해서 구분지어 줍니다.

// fileList 정보를 저장할 배열 선언

var fileList:Array = new Array();



upLis.onSelect = function(fileRefList:FileReferenceList):Void {

fileList = fileRefList.fileList;

var item:FileReference;

var filename:String = "";

var len = fileList.length;

// 업로드 되는 파일 이름을 하나의 문자열을 만듭니다.

for (var i:Number = 0; i<len; i++) {

item = fileList[i];

filename += item.name+", ";

}

var filenameStringLength:Number = filename.length;

// 가장 마지막의 ", " 문자열을 없애기 위해 문자열의 마지막 2 개를

제외하고 전체 업로드가 되는 파일의 이름을 보여주게 합니다.

filename_txt.text = filename.substr(0, filenameStringLength-2);

//

fileUpload(fileList[itemUploadIndex]);

};



function fileUpload(item:FileReference):Void {

item.addListener(upLis);

item.upload("getFile.php");

}




업로드 되는 과정을 프리 업로딩바로 보여주기


업로드가 시작되면 먼저 프리 업로딩바를 화면에 보여 줍니다.

upLis.onOpen = function(file:FileReference):Void {

// 프리 업로딩바를 보여줍니다.

attachLodaingBar();

};


프리 업로드바 바로 상단에는 업로드 되어진 갯수 / 총 업로드 할 파일 갯수가 표시 됩니다.

function attachLodaingBar():Void {

var preloadingBar_mc = this.attachMovie("loadingBar", "preLoading_mc", 1);

// 투명 버튼의 핸드커서를 안 보이게 해 줍니다.

preloadingBar_mc.trans_btn.useHandCursor = false;

// 프리 업로딩바의 최초 스케일이 처음부터 보여주기 위해 1% 로 설정 합니다.

preloadingBar_mc.bar_mc._xscale = 1;

preLoading_mc.str_txt.text = itemUploadIndex+" / "+fileList.length;

}


onProgress 에서는 업로드 된 용량과 전체 용량을 계속 해서 알려 주기 때문에 업로드 되는 동안 우리는 onProgress 를 통해서 다음 그림과 같은 업로딩바를 구현 해 줄 수가 있습니다.

[You must be registered and logged in to see this image.]


그림 3. 업로드가 되는 과정을 프리 업로딩바를 통해 보여주는 장면



upLis.onProgress = function(file:FileReference, bytesLoaded:Number,
bytesTotal:Number):Void

{

// 파일 업로드가 진행되는 상태를 보여 줍니다.

showLoaded(bytesLoaded, bytesTotal);

};



백분율을 이용하여 로딩된 크기 만큼 업로딩바의 x 스케일을 증가 시켜 줍니다.



function showLoaded(l:Number, t:Number):Void {

// 로딩 되는 것을 백분율로 보여주기 위한 공식 입니다.

var percent = Math.floor(l/t*100);

preLoading_mc.bar_mc._xscale = percent;

}


한번에 하나의 업로드가 되어야 하기 때문에 하나의 파일이 업로드가 끝나고 나면 다음 파일을 업로드 해야 합니다.

upLis.onComplete = function(file:FileReference):Void {

itemUploadIndex++;

var totalLength = fileList.length;

// 업로드 된 파일의 갯수와 전체 업로드 할 파일의 갯수가 같다면 프리
// 업로딩바를 제거 해 줍니다.

if (totalLength == itemUploadIndex) {

removeLoadingBar();

} else {

// 그렇지 않다면 다음 파일을 업로드 합니다.

fileUpload(fileList[itemUploadIndex]);

}

};


마지막으로 업로드 될 파일이 업로드가 되고 나면 프리 업로딩바를 화면에서 사라지게 합니다.

function removeLoadingBar():Void { preLoading_mc.removeMovieClip(); }

업로드가 되는 도중에는 플래시 영역에서 반응 막기


업로드가 되고 있는 도중에는 또 다시 업로드가 되는 것을 막기 위해 다음의 그림과 같이 업로드가 되는 동안 표시되는 프리 업로딩바가 보여지는 동안에는 투명 버튼으로 스테이지 전체를 덮어서 버튼 이벤트가 발생하지 않게 합니다.

[You must be registered and logged in to see this image.]


그림 4. 투명 버튼으로 프리 업로딩바를 덮은 모습

[You must be registered and logged in to see this image.]



그림 5. 프리 업로딩바 무비클립의 타임라인


한글로 되어 있는 파일의 이름 업로드


파일을 업로드 할 때 플래시8에서 하는 역할은 서버에 올라가는 파일의 위치와 파일 이름을 서버사이드 언어에 전달하고, 실질적으로 파일을 업로드 하는 역할을 하는 것은 서버사이드 언어가 담당하게 됩니다.

url
매개 변수로 전달된 URL에 파일이 업로드 됩니다. URL은 업로드를 허용하도록 구성된 서버 스크립트여야 합니다. Flash
Player는 HTTP POST 메서드를 사용하여 파일을 업로드를 하고, 업로드를 처리하는 서버 스크립트에는 다음 요소가 포함된
POST 요청을 사용해야 합니다.

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x

Content-Disposition: form-data; name="Filedata"; filename="example.jpg"

Content-Type: application/octet-stream

... contents of example.jpg ...

--AaB03x—


위의 함수에서

item.upload("getFile.php");


에 있는 getFile.php 파일은 다음과 같습니다.

<?php
$uploadfile = "./uploadFile/" . basename($HTTP_POST_FILES[''Filedata''][''name'']);
$uploadfile = iconv("UTF-8","euc-kr", $uploadfile);
@move_uploaded_file($HTTP_POST_FILES[''Filedata''][''tmp_name''], $uploadfile);

?>


위의 코드에서 "./uploadFile/" 은 업로드 되는 파일의 위치 이고,
iconv 를 통해 문자열 인코딩을 하면 한글이 깨어지지 않고 원래의 이름 그대로 서버에 올라가게 됩니다.

모든 것이 동작이 되는 파일은 multi_Upload.zip 파일안에 multi_Upload.fla 에 구현이 되어 있습니다.

이처럼 플래시 8 에서는 이전 버전에서는 불가능 했던 많은 것들이 가능해져서 사용자들이 편리하게 플래시 컨텐츠를 사용할 수 있고, 플래시 개발자자도 좀 더 편리한 방법으로 개발을 할 수가 있습니다.

저자 소개



김정헌은 Adobe Korea 컨설팅 팀에서 User Interface Architect 로 다양한 실무 경력과
강의 경험을 바탕으로 플래시 컨텐츠 및 플래시 라이트 컨텐츠에 대해서 컨설팅 및 세미나를 하고 있습니다. 여러 플래시
커뮤니티에서 그는 보헤라는 닉네임으로 꾸준히 활동을 하고 있고 현재 플라랩(http://www.flalab.com)을 운영하고 있습니다. 또한 이때까지의 경험을 바탕으로 실무자들에게 도움이 되는 책을 집필 중에 있습니다.]