플래시에 있는 멀티업로더를 이용하여, 파일이나 사진을 한꺼번에 웹상에 업로드할 수 있는 서비스가 많이 나오고 있습니다.
태터툴즈의 파일업로드 기능이라던가, 제로보드XE의 파일업로드 기능 등 기존에 일일히 하나씩 파일을 선택해서 올리거나, ActiveX로 업로드했던 방식에서 점차 플래시를 이용한 업로더가 대세가 되어가는 듯 합니다.
그러면서도 간단하게 플래시로 업로더를 구현해보려고 해도, 디자인을 바꾸기가 쉽지 않다던가, 자신의 이용하고 있는 플랫폼에 적용하는 것이 어려워 망설이셨던 분을 위하여, 플래시로 만든 멀티업로더를 배포합니다.



알쯔의 플래시 멀티업로더 특징

버전관리를 하며 계속 릴리즈할 것이 아니기때문에, 이름도 짓지 않고 소스도 그냥 뿌립니다. 알아서 수정해서 사용하실 수 있습니다.
해심적인 파일업로드부분만 구현되어 있고 나머지 프로그래스바라던지, 찾아보기 버튼 삭제 등은 자바스크립트로 모두 빼두었기 때문에, 입맛에 맞게 적용하는 것이 가능합니다.
액션스크립트 3.0을 사용하였기때문에 플래시 플레이어 9버전이 필요합니다. :) 소스를 수정하실때는 플래시 CS3 프로그램이 필요합니다. (더 낮은버전도 액션스크립트 3.0을 지원한다면 가능합니다.)

사용방법

1. 플래시 파일을 HTML 페이지에 삽입합니다.

위의 링크에서 fla 파일을 받으신후 swf 파일로 만드시거나, 바로 swf 파일을 다운받으시면 되겠습니다.
1*1px 크기의 플래시이기때문에 화면 레이아웃에 영향을 미치지 않는 적당한 곳에 각자의 방법을 통해 삽입합니다.


위와 같이 삽입하시는 분은 당연히 없겠지만, 자바스크립트를 이용하던, object 태그를 이용하던 위와 같이 꼭 id 값을 지정해주셔야 합니다.
앞에서도 이야기했듯이 모든 제어는 자바스크립트를 통해 이루어지기 때문에 플래시와 자바스크립트간 통신을 위해서 id 값은 필수입니다.
그리고 flashvars 를 통해 fileMax 값을 정의해줍니다. 파일 하나당 용량제한을 뜻하며 M 단위입니다. 즉, fileMax=10 으로 하면 파일 하나당 10M를 업로드한다는 말입니다.
그리고 uploadURL 을 지정해줍니다. uploadURL 은 실제로 파일을 업로드 받아 서버에 저장하는 기능을 하는 URL로, PHP와 연동하는 것을 예제로 하겠습니다.

2. 찾아보기버튼 만들기

찾아보기버튼을 이미지를 이용하던지, 버튼태그를 이용하던지 하여 onclick 이벤트를 통해 플래시와 통신하여, 파일/폴더 찾기 버튼을 만들어 보겠습니다.


매개변수는 아래와 같습니다.

fileBrowser(fcode,type)

fcode : 파일업로드를 처리하는 곳(PHP파일 등)에서 매개변수로 받을 수 있는 값입니다.
type : 업로드허용 파일 타입입니다.
  - All : 모든파일을 업로드합니다.
  - IMG : 이미지파일만 업로드합니다.
  - MOV : 동영상파일만 업로드합니다.
  - FLA : 플래시파일만 업로드합니다.
  - SND : 사운드파일만 업로드합니다.

3. 파일업로드 처리파일 만들기

1번에서 정의한 uploadURL 경로에 PHP파일을 만듭니다.

플래시에서 넘어오는 파일을 $_FILES['Filedata'] 변수로 받습니다. 이 변수를 가공하는 방법은, 다른 PHP강좌를 참고하세요.
$_REQUEST['fileCode'] 로 넘어오는 값은 아까 2번에서 매개변수중 fcode 에 지정한 값이 넘어오게 됩니다. 게시판 ID라던지, 게시물번호등을 매개변수로 넘겨 DB에 기록하는데 활용할 수 있습니다.


4. 프로그래스바 만들기 (선택)

파일을 업로드하는 곳을 보면 업로드정도를 %로 보여줍니다. 플래시에서 progress 이벤트를 잡아 자바스크립트로 진행률을 던져줍니다.
해당 진행률를 받아 html 등으로 프로그래스바를 만들 수도 있으며, 업로드 % 값을 보여줄 수도 있습니다.

플래시가 삽입된 곳에 자바스크립트로 아래와 같은 함수를 정의해줍니다. 함수명은 반드시 같아야 합니다.


filename : 현재 업로드중인 파일명
upload : 업로드되고 있는 용량 (byte)
total : 파일용량
fileno : 현재 업로드중인 파일이 몇번째 파일인가?
totalfile : 총 몇개의 파일이 업로드 될 것인가?

upload/total*100 이렇게 하면 현재 업로드중인 파일진행률을 % 값으로 바꿀 수 있죠. 이것을 이용하여 ... 부분에 프로그래스바 구현을 위한 소스를 작성하시면 됩니다.

5. 기타 자바스크립트 이벤트 함수명

업로드가 모두 완료되었을 때

EditorFileUploadComplete(cancellist) { }

cancellist는 @로 구분된 전송제외파일목록이 넘어옵니다. (용량초과등의 이유로)
a.gif@b.gif 등으로 넘어온다는 것이죠.

파일찾기창에서 취소버튼을 눌렀을 때

EditorFileUploadCancel() { }

마치면서...

모듈에 포함되어 있던 녀석을 모듈과 별도로 동작하게 하기위해서 일부분 제외하는 과정에서 오류가 있을 수도 있습니다.
소스파일도 함께 업로드하니, 문제가 있는부분은 알아서 수정하여 사용하시거나, 문제가 발생하는 부분을 알려주시면 수정해서 올리도록 하겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

0 Votes
0 Bookmarks