Rev. 2.73

Harald Kirschner씨는 MooTools 자바스크립트 라이브러리와 플래시를 이용하여 복수 파일을 업로드할 수 있게하는 FancyUpload를 만들고 공개했다. 파일들의 관리를 위한 업로드 큐와 전송 과정을 효과적으로 표현하는 프로그레스 바를 갖추고 있으며 세부적인 이벤트 반환 및 필터링 등 다양한 부가옵션을 지원한다. 특히, 자바스크립트가 작동되지 않는 환경에서도 작동하록 설계되어 FancyUpload 함수가 초기화(Initialize)되기 전에는 form태그의 액션이 그대로 동작한다. 파일 업로드에 swf와 자바스크립트가 결합되어 얻는 장점은 멀티 업로드 뿐만이 아니다. 서버에 업로드하지 않고 파일의 용량을 알 수 있어서 용량제한 유효성(Validate) 검사를 클라이언트-사이드에서 할 수 있는 이점도 있다. 이 라이브러리는 플래시 버전 8 이상에서 동작하며, IE6+, Opera9, Firefox1.5+, Safari2+를 지원한다.

FancyUpload를 곧 오픈예정인 기네스 프로젝트에 사용할 목적으로 Prototype/Scriptaculous기반 사이트에서 사용할 수 있도록 컨버전(conversion)했다. MooTools에는 플래시 오브젝트를 효율적으로 다루기 위한 Swiff라는 라이브러리가 있는데, 이 것을 필수로 요구하기 때문에 함께 컨버전 되었다. 아래에 설치된 예제는 Playground의 PHP 구현 예제를 응용하여 Ajax로 업로드 결과를 받아오는 과정을 추가한 것이다. "Browse..." 클릭 후 파일들을 왕창 긁어서 업로드 해 보자. 참고로 업로드한 파일은 서버에 저장하지 않으며, 한글이 섞인 파일명의 처리가 무시되어 업로드에 실패하는 상황도 발생한다.

Select Files
Upload Queue
Check the selected files and start uploading.
  •  
FancyUpload = new FancyUpload('upload-filedata', {
  url: '/lab/upload.php', // Upload target URL, default is form-action if given, otherwise current page
  swf: '/swf/swiff.uploader.swf', // Path & filename of the swf file
  multiple: true, // Multiple files selection, default: true
  types: {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'}, // extensions
  limitSize: false, //Maximum size for one added file
  limitFiles: false, // Maximum files in the queue, default: false
  queueList: 'upload-queue', // The Element or ID for the queue list
  uploadTimeout: '6', // upload timeout (sec)
  onAllComplete: function() { // Event fired when all files uploaded
    // Ajax.Request for upload result
    new Ajax.Request('/lab/upload-result.php', {
      mothod: 'POST', onSuccess: function(req) {
        setTimeout(function() {
          // clear the queue list
          FancyUpload.clearList();
        }, 1500);
        // display the upload result
        $('upload-status').innerHTML = req.responseText;
      }
    });
  }
});

본 자바스크립트 라이브러리의 라이센스는 MIT-License를 따른다. 어떠한 환경에서건 자유롭게 재가공하여 사용할 수 있지만, 저자권(copyright) 마크는 절대로 지울 수 없다는 내용이다.

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments

Got something to add? You can just leave a comment.

  • 곽연준 곽연준

    항상 잘 들러서 감사히 눈팅하며 정보를 얻어가고 있던 사람입니다.
    ASP에서 Prototype/Scriptaculous 기반으로 사이트를 돌리고 있는데
    ActiveX 를 이용하지 않고 다중업로드하는 방식을 찾아 힘든 여정을 계속하다가
    이 글을 보니 새로운 길이 보이는군요.

    기존 SWFUpload 를 ASP용으로 바꿔서 사용해봤는데, 힘든점이 있었는데,
    FancyUpload 로 다시금 한번 해 봐야겠습니다.

    혼자서 시도는 해 보겠지만, 업로드 큐에 이미지를 올리면 그 이미지가 프리뷰 되게 하는 글도 올라왔으면 하는 희망을 가져봅니다.

    reply edit

  • 아! 멋진 아이디어입니다. 로컬파일에 접근할 수 있는 권한이 브라우저마다 달라서 치졸한 코딩이 필요하겠지만 가능은 하겠군요.

    reply edit

  • 안녕하세요 저는 초보 개발자인데요.
    위에 파이어준님이 수정하신 fancyupload를 적용하려고 하니 자꾸만
    FancyUploade가 정의되지 않았다고 나옵니다.
    보니까 include란 함수로 불러들이 시길래 찾아보니 include.js 란 파일에 함수가 기술되어 있어서
    <script language="javascript" type="text/javascript" src="./js/include.js"></script>
    써줬지만 역시나 정의가 안됐다고 합니다.;;;;
    머가 문제일까요

    reply edit

  • include.js는 제가 편의상 사용하는 라이브러리이고 보다 정확한 example 코드를 작성한다면 아래와 같습니다.

    <link href="/css/fancyupload.css" type="text/css" rel="stylesheet" media="all" />
    <script src="/js/prototype.js" type="text/javascript"></script>
    <script src="/js/effects.js" type="text/javascript"></script>
    <script src="/js/swiff.uploader.js" type="text/javascript"></script>
    <script src="/js/fancyupload.js" type="text/javascript"></script>

    <script type="text/javascript">
    // <![CDATA[
    Event.observe(window, 'load', function() {
    FancyUpload = new FancyUpload('upload-filedata', {
    swf: '/swf/swiff.uploader.swf',
    url: '/uploads/upload.php',
    queueList: 'upload-queue',
    uploadTimeout: '6',
    onAllComplete: function() {
    new Ajax.Request('/uploads/FancyUpload/upload-result.php', {
    onSuccess: function(req) {
    setTimeout(function() { FancyUpload.clearList(); }, 1500);
    $('upload-status').innerHTML = req.responseText;
    }
    });
    }, onError: function(msg){
    $('upload-status').innerHTML = msg;
    }
    }); // FancyUpload
    }); // Event.observe
    // ]]>
    </script>

    reply edit

  • 바보 바보

    아무리 해도 일반 버튼이 팬시 업로더 버튼으로 바뀌지 않습니다. ㅆ.ㅆ

    오늘 하루종일 삽질하고 있네요.

    먼저 MooTools를 가지고 도전해봤다가, 실패하고..

    다시 검색 검색하고, 찾아 찾아 여기까지 왔는데..
    이 버전을 다운로드해서 테스트해도 동일한 결과네요.

    테스트용 HTML 소스를 만들고, 제공하신 자바 스크립트를 포함했습니다.
    서버를 돌려서 테스트 하지는 않고, 그냥 로컬에서 테스트하고 있습니다.

    파이어 버그에서 NET -> FLASH에 FLASH가 보이지 않네요.
    BODY에 FancyUploader 오브젝트는 달려있는게 보입니다.

    무엇을 잘못하고 있는걸까요?

    바보 같은 요구사항인지 모르겠지만,
    스텝 바이 스텝으로 설명해 주시면 정말로 감사하겠습니다.

    혹, 간단한 샘플용 테스트 페이지를 통째로 올려 주실수 있는지요?
    미리 감사드립니다. 꾸벅

    reply edit

  • http://wiki.firejune.com/FancyUpload/Demo

    이 페이지를 참고해 보세요.

    reply edit

  • 바보 바보

    어찌 어찌 했더니, 작동 하네요.
    서버에 올려 접근하니(http://localhost:7001/Demo.jsp) 되네요.
    휴~ 머리가 나쁘니 몸이 고생..

    염체 불구하고 한가지 더 여쭤보겠습니다.
    (현재 JSP를 사용하여 팬시 업로더를 붙이고 있습니다.)

    어디서 실제적인 업로드가 일어나는지 궁금하네요.
    PHP 파일은 그냥 업로드 후 해당 정보만 가져와 처리하는듯..
    (실은 PHP도 문외한 입니다. T.T)

    플래쉬, 자바 스크립트가 너무 약해 아무리 찾아봐도 알 수가 없네요.

    아.. 하나더, JSP를 사용한 예제도 있으신지요?

    미리 감사합니다.

    reply edit

  • 파일을 작성하는 방법은 플래폼별로 다르고, 상황에 따라 다르기때문에 첨부된 php 예제에는 클라이언트로부터 정보를 성공적으로 받아오는 것 까지만 처리하고 있습니다. 아쉽게도 jsp는 제가 문외안이랍니다. 죄송해요;

    reply edit

  • 비요일 비요일

    댓글로 적어주신 대로 샘플파일을 만들어 봤습니다. 그런데
    swiff.uploader.js (line 159)에서 이런에러가 뜨는 이유는 왜일까요?

    debug is not defined
    [Break on this error] debug(obj, fn);

    reply edit

  • debug함수를 호출하는 부분을 주석처리해 주시면 되겠습니다.

    reply edit

  • 파이어올 파이어올

    multiple: true, // 수정 겟수만큼 등록 하게 수정가는 한가요 multiple: 2 2개만..

    addFile: function(name, size) {

    if (!this.options.multiple && this.fileList.length) < -- 이부분에 count 2 만 해주면 될것 같은데.

    this.remove(this.fileList[0].name, this.fileList[0].size);
    var element = document.createElement('li');
    element.innerHTML = '<span class="queue-file">'+ name +'</span><span class="queue-size" title="'+ size +' byte">~'+ Math.ceil(size / 1000) +' kb</span>';
    this.queue.appendChild(element);

    this.fileList.push({
    name: name,
    size: size,
    status: 0,
    percentage: 0,
    element: element
    });

    파이어준님 답법 부탁드려요.~ 그럼 수고 하시구요 홈피 넘 멋저요~

    reply edit

  • multiple: true 옵션은 사용자가 파일 선택창에서 다중으로 선택할 수 있게 할 것인지, 하지 않을 것인지를 Boolean 값으로 입력합니다. 2개까지만 선택하게 하려면, multiple 옵션을 false로 주시고 유저로하여금 선택을 두번하게하거나하는 커스토마이즈가 필요하겠네요. 참고로 onSelect 이벤트 핸들러를 사용하여 파일 수를 체크하시고 처리하세요.

    reply edit

  • 파이어올 파이어올

    multiple: true 주고 limitFiles: false, 를 limitFiles: 2, 수정하니 파일 2개만 등록되네요 ..

    파이어준님 감사합니다. 감사해서 구글 클릭 하고 갑니다.

    reply edit

  • 아하! 설정옵션이 있었군요! 미안합니다.(꾸벅)

    reply edit

  • ruby ruby

    rails에서 적용하는 방법도 별도로 있나요? 해보고 싶은데..

    reply edit

  • http://jimneath.org/2008/05/15/swfupload-paperclip-and-ruby-on-rails/ 이 라이브러리는 아니지만 비슷한 류의 라이브러리인 SWFUload와 Ruby를 응용한 예제가 있군요. 참고하세요.

    reply edit

  • 야베스 야베스

    플레시에서 업로드할때 어떤 파라미터명으로 업로드가 되는지 혹시 알수 있을까요? ASP환경에 적용해보려고 하는데 파일선택하고 업로드까지는 되는데 업로드페이지에서 서버에 저장시키질 못하고 있습니다. 어떤 파라미터명으로 받아야 하는지를 몰라서요... php에서는 $_FILES라는 이름으로 받아오는것 같던데 request("_FILES")하니까 안되네요^^; php는 전혀 몰라서...^^; 혹시 파라미터명에 실어서 보내는것이 아니고 바이너리 데이터만 보내는것은 아니겠죠?

    reply edit

  • http://www.freeaspupload.net/freeaspupload/download.asp 에 예제를 다운로드할 수 있네요. 참고해 보세요 ^^

    reply edit

  • 평범한 개발자 평범한 개발자

    무툴 홈페이지에는 업그레이드 버전이 출시 됐던데... 파이어 준님이 변환 하신건 플래시 9까지 에서만 작동하는것 같네요. 혹.. 플래쉬 10 기반으로도 업그레이드 할 계획이 있으신지요?

    reply edit

  • 야베스 야베스

    파이어준님 감사합니다.^^
    링크해 주신 곳에서 소스받아 ASP로 성공했습니다. 헌데 문제가 하나 있어서요....
    한글파일은 업로드시 오류가 나네요. 포스트하신 내용에도 한글은 안될수 있다는 말씀을 언급하셨는데. 파이어준님 블로그에서 테스트 한것은 한글파일이 한번도 오류를 안내네요. 여러번 해보았지만 말이죠.
    폼으로 전송했을시에는 한글이 잘 업로드 되는데 Fancyupload를 통해서 업로드할시에만 에러가납니다. 혹시 참고할만한 정보를 얻을수 있을까해서 이렇게 글 남겨 봅니다.^^
    항상 행복하세요^^

    reply edit

  • 야베스 야베스

    http://zend.lojcomm.com.br/entries/tutorial-starting-with-asp-xtreme-evolution/
    어쩌다 찾게된 곳인데 혹시 봐주실수 있나해서요^^;

    reply edit

  • 미칠거같아요 미칠거같아요

    파이어준님 출장중이신가요? ^^
    답변이 안달려서요... 궁금해서 계속 들어오다가 다시 또 글을 남김니다..
    Prototype으로 초기에 시작을 하지 않는건데.. 의외로 적용예도 적고 다른것에 비해 좀 떨어지는 느낌이 들어요..
    그래서 더욱 플래쉬버전10으로 변경을 기다립니다.
    해드릴건 없어서 올때마다 구글클릭하고 합니다.

    reply edit

  • 대단히 죄송합니다. 이제서야 댓글을 확인했네요. 시간나는데로 분석해보고 답변드리도록 하겠습니다.

    reply edit

  • 미칠거같아요 미칠거같아요

    바쁘신가붑니다. ^^
    진득히 기다리겠습니다..

    reply edit

  • 미칠거같아요 미칠거같아요

    세상도 뒤숭숭... 마음도 뒤숭숭...

    reply edit

  • 힘든개발자 힘든개발자

    아직도 검토중이신가 봅니다..
    ^^

    reply edit

Your Reaction Time!

captcha

avatar