총 게시물 62건, 최근 0 건
   
[Flex,Javascript] 다중 파일 업로더 (Multi file uploader) - 소스 공개, 첫 배포
글쓴이 : 지용호 날짜 : 2008-10-25 (토) 14:14 조회 : 13415
MultiFileUploader_release.zip (247.3K), Down : 2, 0000-00-00 00:00:00
MultiFileUploader_source.zip (1.7M), Down : 8, 0000-00-00 00:00:00


다중 파일 업로더 (Multi file uploader)

왜 만들었나?

Flash Player 10이 나오면서 기존 Javascript-Flash 기반 다중 파일 업로더 기능이 제대로 동작하지 않아 이것을 쓰는 많은 사이트들이 발등에 불떨어지듯한 상황이 발생하게 되었다. 내가 참여하고 있는 스타플(http://starpl.com)도 예외는 아니다.

원인을 살펴보자면 Flash Player의 파일 업로드에 대한 보안(?)정책이 바뀐 것에 기인한다. Ajax(Javascript)만 가지고 실시간 다중 파일 업로드가 안되기 때문에 Ajax에서 직접 ExternalInterface로 Flash의 FileReference.browse() 메소드를 호출하여 파일을 업로드하고 그 결과를 다시 Ajax로 ExternalInterface를 이용해 반환하는 거였는데 여기서 문제될 만한 부분은 Ajax쪽에서 사용자 조작이 있어 browse() 메소드를 호출하면 바로 "Error #2176 팝업 창 표시와 같은 특정 동작은 마우스를 클릭하거나 버튼을 누르는 것과 같이 사용자가 조작하는 경우에만 발생합니다."라는 에러가 발생한다. 즉, Flash Player 10부터는 Flash 내부가 아닌 외부 Ajax와 같은 사용자 조작으로는 browse() 메소드를 호출할 수 없다!

Flash Player 10 부터는 Flash에 버튼을 만들고 FileReference.browse()를 호출해야한다.

왜 공개했나?

소스 공개의 묘미는 함께 알아가는 가는 거다. 본인의 실력이 특출나기 때문이 아니라는 점을 강조하고 싶다. 오히려 부족함을 느끼기 때문에 블로깅을 하는 것과 동일하다. 블로깅을 하면 나도 모르게 몰랐던 것도 알아간다. 왜냐하면 블로깅을 통해 관심 분야의 사람들과 만날 수 있기 때문이다. 소스 공개도 마찬가지이다. 새로운 이슈에 대해 나만 알고 있다면 얼마나 이기적인가? 어짜피 알거면 같이 알아가면서 함께 발전하자는게 나의 생각이다.

그런 의미에서 여러분도 with 블로깅&소스공개?!



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

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

* 사용방법
 1. 자바스크립트를 통해 이벤트 핸들러를 등록한다.(FAService Flex-Ajex 통신 브릿지 이용, Flex-JS로 제작됨 , 본인 제작, Flex쪽 소스공개 안 되어 있음)
 2. 파일 업로드를 위한 설정을 한다.(가령 업로드할 서버 경로, 파일 사이즈, 필터, 버튼이미지 경로등...)
 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 이벤트가 발생한다.
 
* 각 이벤트 파라미터들
  이벤트 발생시 파라미터들은 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 : 이 값은 서버개발자가 맘대로 바꿀 수 있다. 예제 PHP는 다음과 같이 반환한다. 반드시 JSON형태의 String형태로 만든다.
  {"sourceFilename":"src_filename.ext", "uploadedFilePath": "http://jidolstar.com/upload/uploaded_filename.ext", "uploadedFilename":"uploaded_filename.ext", "bytesTotal":10233
 - 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_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 );
 
* Flex SDK 기반으로 만들어서 그런지 용량이 작지는 않습니다. ActionScript 3 기반으로 만들면 더 작아질 수 있을텐데 말이죠~ ^^
 
* FAService에 대해
 - FAService는 Flex-Ajax 통신 모듈입니다.
 - 여기서는 소스가 공개되어 있지 않습니다. 사용하는 법만 내부적으로 볼 수는 있습니다. (조만간 공개할 수 있음)
 - 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 함수 목록등을 반환할 수 있는 함수를 만들 필요가 있다고 생각합니다.



실행 동영상

동영상에서는 본인이 만든 다중 파일 업로더를 시연해보는 모습을 담았다.

IE6, FF, Google Chrome 브라우져에서 각각 테스트 해봤다.

중간에 파일 업로드에 실패하는 것은 지정된 용량 또는 갯수을 초과한 경우이다. 또 Html의 input button을 눌러서 Flash Player 10 환경에서는 안된다는 것도 보여주고 있다.

동영상에서 보여지는 버튼은 Flex로 만들어진 버튼이다. CSS SWF 또는 일반 이미지(png,jpg,gif,swf)를 붙일 수 있도록 설계했다. 즉 소스를 수정하지 않고도 버튼의 디자인은 입힐 수 있다는 것이다.

파일이 업로드 중에는 각종 이벤트를 송출하고 있다. 이것으로 실패와 성공 여부를 명확히 알 수 있다.

아직 첫번째 버전이라 부족한 점이 있지만 계속 개선되어 갈 것이라 생각한다.
 

소스 및 배포판




 

관련글

Flash Player 10 보안샌드 박스 변경에 따른 이슈 해결방법
[FP10] FileReference는 어떻게 달라졌을까?
[본인글]Adobe Flash Player 10 정식 배포


사용법에 대한 메뉴얼은 나중에 쓸께요... 제가 넘 바빠서...
별로 어렵지 않으니 여러분들이 테스트 해봐주셨으면 합니다.
 



당신의 별을 찾으세요. 스타플(http://starpl.com)  


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


지용호 2008-10-25 (토) 14:14
Flex 학습하시는데 도움이 되길 바랍니다.
댓글주소
이유화 2008-10-25 (토) 20:20
우와우와~~감사합니다!!^^
스승님~ 그때 어떤 강의에서 봤는데요,
알집처럼 파일집을 만들어주는 기능도 플렉스에 있는걸로 아는데요..
스승님도 그 기능을 자주 사용하시나요?
궁금해용>-
댓글주소
지용호 2008-10-25 (토) 23:23
예전 Flash Player 9과 같은 경우 로컬파일은 반드시 서버에 보내서 다시 받아와야 하는데....
이번 Flash Player 10은 로컬파일을 사용자 인터렉션이 있다면 바로 사용이 가능하죠.

가령 이미지 에디터를 Flex나 Flash로 만들었다면 로컬의 이미지를 가공하기 위해 서버로 전송해야하는 불편함이 있었습니다. 하지만 10부터는 그런 노가다를 안해도 되죠.

파일집도 마찬가지 입니다. 9버전은 반드시 서버와 통신이 있었을겁니다. 매우 비효율적이지요. 하지만 10부터는 Flex가 직접 파일을 압축해서 Binary 형태로 바꿀 수 있습니다.

분명 Ajax가 Flex의 FileReference를 사용할 수 없다는 불편함이 있습니다만... 그것이 없어짐으로 할 수 있는 일이 더 많아진거죠. Ajax가 만약 FileReference를 그대로 사용할 수 있다면 아마도 로컬파일을 Ajax가 Flash를 이용해 가공이 가능하기 때문에 보안상 허락될 수 없는 부분이죠. 이해가 되실런지~~ ^^
어쨌든 나뻐진것에 비해 더 좋아진 기능이 많다는겁니다. ^^
댓글주소
   

총 게시물 62건, 최근 0 건
번호 제목 글쓴이 날짜 조회 추천
62  [Flash 3D]토성 그리기 지용호 07-10 7735 0
61  Adobe RIA 오픈캐스트 개설! 지용호 07-10 6762 0
60  플렉스빌더 an error has occurred. see the log file 에… +3 정재원 06-06 7051 0
59  EarthBrowser : Adobe AIR 프로그램 소개 +1 지용호 02-13 8267 0
58  설 연휴 즐겁고 편히 잘 보내세요^^ 윤연식 01-23 5933 0
57  rss 리더기 비밀번호 입력 안상주 12-17 12118 0
56  [숙제] ActionScript 3.0 클래스 관계 및 설계 +2 지용호 12-16 9653 0
55  [숙제]ActionScript 3.0 객체지향프로그래밍(OOP) 5… 지용호 12-16 8919 0
54  [숙제]ActionScript 3.0 의 이벤트(Event) 지용호 12-09 9555 0
53  폰트 유니코드 변환기(Font unicode converter) +2 지용호 12-03 11045 5
52  프로젝트 게시판을 이동합니다. 이형철 11-16 8914 19
51  [Flex,Javascript] 다중 파일 업로더 (Multi file upload… +3 지용호 10-25 13416 47
50  Flex로 만든 이쁜 PocketMod +3 지용호 10-22 9460 57
49  가끔씩 잊지 않도록 글 남깁시다~~~ +4 이광우 10-16 6969 57
48  조금만 기달려 주세요... +1 윤연식 10-14 12674 52
 1  2  3  4  5  맨끝
 
Since 2001.2.7 과학기술정보통신부 등록 비영리민간단체 천문노트. Copyright All rights reserved.
단체명 : 천문노트  |    고유번호 : 101-82-15888  |    대표자명 : 김태욱, 조우성  |    주소 : 138-804 서울특별시 송파구 가락동 93 금강빌딩 7층 710호  |    전화 : 02-543-3295  |    Fax : 02-6918-6888  |    통신판매신고번호 : 종로 제01-5696호  |    개인정보관리책임자 및 사이트관리자 : 지용호