플래시 멀티업로더 배포

Author : 알쯔 / Date : 2008. 3. 24. 16:37 / Category : 개발일지

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



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

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

사용방법

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

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

<embed src="uploader.swf" id="Uploader" flashvars="fileMax=10,uploadURL=/upload.php"></embed>

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

2. 찾아보기버튼 만들기

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

<input type="button"
onclick="document.getElementById('Uploader').fileBrowser(매개변수);" />

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

fileBrowser(fcode,type)

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

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

1번에서 정의한 uploadURL 경로에 PHP파일을 만듭니다.
<?php
$file = $_FILES['Filedata'];
$fileCode = $_REQUEST['fileCode'];
move_uploaded_file($file['tmp_name'],'저장경로');
// $fileCode 변수의 값을 활용하여 DB저장
?>

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


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

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

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

<script type="text/javascript">
function EditorFileUploadProgress(filename,upload,total,fileno,totalfile) {

    document.getElementById("uploadPreg").value = filename+" "+(upload/total*100)+"% 진행중";
    ....
}
</script>
<input type="text" id="uploadPreg" />

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

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

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

업로드가 모두 완료되었을 때
EditorFileUploadComplete(cancellist) { }

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

파일찾기창에서 취소버튼을 눌렀을 때
EditorFileUploadCancel() { }


마치면서...

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

Tags : , , ,

Trackbacks 0 / Comments 14

  • Favicon of http://www.beneglo.com BENEGLO 2008.04.12 02:04

    플래시는 너무 어렵던데 ㅠㅠ

    REPLY / EDIT

    • Favicon of https://blog.arzz.com 알쯔 2008.04.12 20:11 신고

      액션스크립트 2.0 같은경우는 자바스크립트를 다루실줄 아신다면... 액션스크립트 3.0 같은경우는 Java를 다루실줄 아신다면 금방 익히실 수 있습니다. ^^
      나머지 모션은... 저도 포기했습니다. -ㅁ-
      모션으로 간단하게 될것을 액션으로 처리하는 사람의 슬픔이란;;; 모션은 너무 어려운것 같아요. 제겐...

      EDIT

  • Favicon of http://ngweb.tistory.com nona 2008.05.13 18:14

    유용한 자료 감사합니다. ^^ 잘 사용하겠습니다.

    REPLY / EDIT

  • Favicon of http://www.jay2.net jay2shine 2008.05.19 10:10

    좋은 소스를 제공해 주셨는데 너무 많은것을 바라는 것일지 모르겠지만
    혹시 테스트 해 볼수 있는 곳은 없나요?

    REPLY / EDIT

    • Favicon of https://blog.arzz.com 알쯔 2008.05.19 13:25 신고

      티스토리에 얹혀살고 있는지라, 테스트할수있는 별도의 페이지는 만들지 못하였습니다.
      간단한 회원가입(아이디,비밀번호,이메일)후 보실 수 있는 곳이 있는데, 가입이 괜찮으시다면 http://www.arzz.com 에 로그인후 마이페이지에서 확인하실 수 있습니다. (마이페이지 > 레포트박스에서 과목을 추가하시고 레포트추가를 눌러서 파일업로드를 테스트 해보시기 바랍니다. :) )

      EDIT

    • Favicon of https://blog.arzz.com 알쯔 2008.05.19 13:26 신고

      해당 서비스는 위의 플래시 파일을 일부수정하고, Ajax와 php, 그리고 DB를 이용하여 처리하고 있습니다. :)

      EDIT

  • Favicon of http://www.bumworld.pe.kr bumworld 2009.06.16 18:59

    안녕하세요..
    공개해주신 업로더로 테스트 중인 김영범 이라고 합니다.
    좋은 소스 공개해주신것 감사합니다.
    제가 테스트 중에 문제되는 부분이 있어 문의드릴려고 글을 남깁니다.
    우선 기본적인 업로드는 잘 됩니다.

    그런데 문제가 되는 부분은 일반 form에서 multipart/form-data로 업로드시에는 contentType이 정상적으로 나오는데

    플래시로 업로드 할때는 contentType이 application/octet-stream로 나오고 있습니다.(ex: 이미지는 image/jpeg)

    플래시 코드에는
    file.addEventListener(Event.OPEN, openHandler);
    file.addEventListener(Event.COMPLETE, completeHandler);
    file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
    file.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    file.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
    file.upload(uploadURL);
    이렇게 되어 있는데 혹시 이부분이 바꿔주면 서버단에서도 contentType을 알수있게 upload 할수 있는 방법이 있을지요?

    제가 플래시 개발자는 아니라서 어떻게 해야 할지 모르겠네요..

    도움좀 부탁드립니다.

    REPLY / EDIT

    • Favicon of http://blog.arzz.com 알쯔 2009.06.24 11:32

      플래시가 내부적으로 파일을 업로드할때, stream 방식으로 올리는것으로 알고있습니다...
      form-data로 업로드시엔, 업로드가 끝난후에 이벤트를 받아와, 파일정보를 불러오기때문에 contentType이 제대로 잡히는거구요.

      즉 플래시업로더도, 파일전송이 끝난후에, contentType을 읽어오시면, 제대로 나올겁니다.

      EDIT

  • 2009.07.08 00:11

    비밀댓글입니다

    REPLY / EDIT

    • Favicon of https://blog.arzz.com 알쯔 2009.07.08 02:03 신고

      안에 사용된 FileRefernce 클래스는 ActionScript 3.0 버전이기때문에 ActionScript 3.0을 지원하지 않는 Flash 9.0 이하 버전에선 여실 수 없습니다. ㅠ
      아무리 다운그레이드해서 저장을 하여도 ㅠㅠ

      EDIT

  • 초보 2009.07.08 00:13

    8번전용도 올려주시면 감사하겠습니다.

    REPLY / EDIT

  • 좋아 2010.06.23 12:13

    감사합니다. 찾고있었는데... 잘 사용할게요. ^^;

    REPLY / EDIT

  • 플래시처버 2010.12.23 17:50

    감사합니다 잘사용하겠습니다.

    REPLY / EDIT

  • Favicon of http://superkts.pe.kr 므흣 2011.04.13 17:09

    감사합니다. 그런데 아래와 같은 에러메세지가 뜹니다. ㅠㅠ

    Error: Error #2176: 팝업 창 표시와 같은 특정 동작은 마우스를 클릭하거나 버튼을 누르는 것과 같이 사용자가 조작하는 경우에만 발생합니다.
    at flash.net::FileReferenceList/browse()
    at Uploader_fla::MainTimeline/fileBrowser()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at flash.external::ExternalInterface$/_callIn()
    at <anonymous>()

    아마도 플래시 보안 업데이트로 인해 막힌것이 아닌가 생각됩니다..

    REPLY / EDIT

Follow Me

Search

Statistics

  • Total : 2,319,648
  • Today : 1
  • Yesterday : 28

Blog Information

알쯔

Calendar

«   2019/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
Copyright © 알쯔의 외부기억장치 All Rights Reserved
Powered by ARZZ.COM