[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.

일전에 Flex로 만든 다중 파일 업로더(Multi file uploader)소스를 공개했었다. ( 이전글 : http://blog.jidolstar.com/396 )
공개후 난감했던 것이 애플리케이션 프로그램 하나가 200kb가 넘는 것이였다. 파일 업로드 기능만 할 뿐인데 Flex로 만드는 것은 문제가 있다는 생각이 들 수 밖에 없었다. 역시 간단한 기능은 ActionScript 프로젝트로 만드는게 좋겠다.

그래서 ActionScript 3.0으로만 만들어보았다. 그랬더니... 11kb밖에 안된다. Flex로 개발할 때와 비교해 볼 때 애플리케이션 용량이 무려 20배 정도가 차이난다. 아무래도 Flex는 기업솔루션을 만들기 위해 최적화 되어서 그런지 무겁다는 느낌을 지울 수가 없었다.

어쨌든 TextCube, 제로보드 등에 사용되던 Flash용 파일 업로더인 swfupload(http://swfupload.org/)가 11kb인데.. 본인이 만든것도 11kb이니깐, 얼추 비슷하다. 물론 내가 만든 것보다는 swfupload의 기능이 더 정교한것 같더라.

가벼운 버전을 소스와 함께 공개하니 다운로드 받아 사용하길 바란다.





이전에 FAService( Flex-Ajax 통신을 위한 컴포넌트)부분을 공개하지 않았는데, 그 부분도 함께 공개한다.
또한 추가 기능으로 중간에 파일 업로드를 중단할 수 있도록 제작했다.

소스를 보면 알겠지만
나름대로 라이브러리화 시켜서 만들었다.
FAService의 경우 Ajax통신이 빈번한 애플리케이션을 여러개를 만들어야 하는 상황일 때 공통 RSL로 뽑아서 사용하면 효율적이다. 그리고 fileupload 라이브러리는 Ajax 통신(FileUpload.as 참고)뿐 아니라 Flex, ActionScript 3에서도 사용(FileUploadCore.as)할 수 있게끔 구성했다.

주석은 달다 말았다. 메뉴얼도 특별히 필요 없을 것 같다.
본인이 만든 소스는 swfupload보다 쓰기에 불편할 수 있지만 정보 교환용 및 학습용으로 괜찮다고 생각한다.

readme.txt에 들어간 내용

------------------------------------------
--- 멀티 파일 업로더 (Multi-file uploader) ---
------------------------------------------

아직 실무에 적용되지 않은 상태입니다만(곧 적용할겁니다.)
사용하는데는 어려움이 많이 없을거라 생각합니다.
공유해서 함께 지식을 넓혀가길 희망합니다.

* author : 지용호 (Yongho, Ji)
* Q&A : jidolstar@gmail.com, http://blog.jidolstar.com
* license : LGPL (수정시에는 소스를 공개합니다. 하지만 그대로 사용하는 것은 사용 출처만 밝혀주세요.)
* 최초제작일 : 2008.10.24
* 최종제작일 : 2008.10.26
* 제작언어 : Adobe Flex 3
* 제작환경 : Adobe Flex Builder 3 Professional
* 구동환경 테스트 : IE6, FF, google chrome
* 제작배경
  Flash Player 10이 정식 릴리즈 됨에 따라 Javascript를 통해 FileReference.browse() 메소드를 호출을 방지하도록 되었기 때문에
    이 방식을 사용한 것을 대체하려고...

* 첨부파일 설명
 1. fileuploader 폴더안에 html 부분처럼 사용하면 되겠다.
 2, php 폴더에는 예제로 만들어진 php소스가 있다. jsp, asp로 비슷하게 만들어 쓰면 되겠다.

* 사용방법
 1. 자바스크립트를 통해 이벤트 핸들러를 등록한다.(FAService Flex-Ajex 통신 브릿지 이용, Flex-JS로 제작됨 , 본인 제작, Flex쪽 소스공개 안 되어 있음)
 2. 파일 업로드를 위한 설정 Flash Vars로 등록 한다.(가령 업로드할 서버 경로, 파일 사이즈, 필터, 버튼이미지 경로등...)
 3. 업로더 SWF를 HTML상에 붙인다. 예제에서는 swfobject.js를 이용했다.
 4. 서버쪽 프로그램을 만든다. 첨부된 php파일을 참고하면 되겠다. asp, jsp든 어떤 언어를 써도 동일하게 만들면 되겠다.
 5. 예제에선 정상적으로 동작하는 경우 textarea에 ready가 뜬다. 이벤트 핸들러가 호출되면 여기에 출력하도록 짜여졌다.
 6. 파일 선택후 ok하면 이벤트는 fileuploader_startAll, (fileuploader_start, fileuploader_step, fileuploader_end), fileuploader_endAll 순으로 진행된다.
    중간에 ()는 여러개의 파일의 경우에 진행상황에 따라서 번갈아가며 호출된다.
 7. 서버 접속이 원할치 않는다면  fileuploader_fail 이벤트가 발생한다.(보안 또는 IO)
 8. 파일 선택을 취소하면 fileuploader_cancel가 발생한다.
 9. 1개의 파일 사이즈가 정해진 크기보다 크면 fileuploader_fileSizeError 이벤트가 발생한다.
 10. 선택한 파일의 갯수가 정해진 갯수보다 크면 fileuploader_fileCountError 이벤트가 발생한다.
 11. 중간에 uploaderFAService.call( "stop", null )을 호출하게 되면 업로드가 최소되고 fileuploader_stopAll 이벤트가 발생한다.
 
* 각 이벤트 파라미터들
  이벤트 발생시 파라미터들은 JSON Object 형태이다.
 
 - ready  없음
 - fileuploader_startAll : {"totalCount":total count of files, "totalSize":total size of files(bytes) }
 - fileuploader_start : {"filename":file name, "bytesTotal":size of file(bytes)}
 - fileuploader_step : {"filename":file name, "bytesTotal":size of file(bytes), "bytesLoaded":uploaded size of file(bytes)}
 - fileuploader_end : {"filename":file name, "bytesTotal":size of file(bytes), "uploadCompleteData":...}
   여기서 uploadCompleteData는 서버 개발자가 마음대로 값을 바꿀 수 있다. JSON 형태의 String값으로 넘겨주면 프로그램에서는 자동적으로 Object형태로 반환해준다.
 - fileuploader_fail : {"filename":file name, "bytesTotal":size of file(bytes, "msg":error message}
 - fileuploader_endAll : {"failCount": count of files upload failed, "endCount": count of files upload successed , "totalCount": count of files tried to upload }
 - fileuploader_stopAll : {"totalCount":total count of files, "totalSize":total size of files(bytes) }
 - fileuploader_fileSizeError : {"filename":file name, "bytesTotal":size of file(bytes), "maxFileSize": maximum file size(bytes)}
 - fileuploader_fileCountError :{"totalCount":total count of files, "maxFileCount": maximum count of files }
 
* Flash Player 9이하일때는 다음과 같은 방법으로 파일 brawsing을 요청할 수 있다. 하지만 이 방법은 사용을 권장하지 않는다.
 - uploaderFAService.call('browse',null );

* FAService에 대해
 - FAService는 Flex-Ajax 통신 모듈입니다.(ActionScript 3 프로젝트로도 사용이 가능)
 - 여기서는 소스도 함께 공개했습니다.
 - FABridge와 비교할때 최소기능만 사용하도록 만들었습니다.
 - 단순히 addEventListener, removeEventListener, call 만으로 Flex와 Ajax간에 통신합니다.
 - addEventListener은 Flex에서 발생하는 이벤트명, JS이벤트 함수, 우선순위 값이 들어갑니다. 우선순위 값은 같은 이벤트 발생시 호출한 JS이벤트핸들러 함수의 호출 순서를 정합니다. 숫자가 클수록 등록순에 관계없이 먼저 호출됩니다.
 - JS 이벤트 핸들러 함수의 파라미터 값들은 Flex에서 정해서 보내줍니다. Object형이 일반적이지만 Array, Boolean, int, float,String 형등 다양한 형태가 될 수 있습니다.
 - removeEventListener은 기존에 등록한 이벤트 핸들러를 삭제해줍니다.
 - call 함수는 Flex쪽에 "호출명"이 등록되어 있어야만 호출됩니다. 인수값은 Object, Array, Boolean, int, float,String 형등이 모두 가능하며 이 값은 Flex쪽에서 정합니다.
   만약 Flex에서 정한 형태로 만들어지지 않으면 JS Alert 창을 띄우게 됩니다.
 - call 함수는 반드시 ready 이벤트가 발생한 시점 이후로 사용해야합니다. 이전에는 적용되지 않습니다.(스텍을 이용해서 명령을 저장해두었다가 하는 방법도 모색하고 있음, addEventHandler는 그렇게 하고 있음)
 - 등록되어진 이벤트 핸들러, 호출가능한 call 함수 목록등을 반환할 수 있는 함수를 만들 필요가 있다고 생각합니다.
 
 

 

참고내용

[Flex,Javascript]다중 파일 업로더(Multi file uploader) -소스공개,Flash Player 10 환경 적용
swfupload 공식홈페이지
[Flash Player 10]FileReference의 변경된 보안정책과 새롭게 추가된 기능에 대한 나의 생각



글쓴이 : 지돌스타(http://blog.jidolstar.com/398)

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

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

Adobe Flash Platform ActionScript 3.0, ExternalInterface, FAService, File uploader, FileReference, flex, javascript, multi file upload, swfupload, 다중 파일 업로드, 파일 업로더, 파일 업로드