지돌스타의 RIA와 천문프로그래밍

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

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

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

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

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

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

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로 비슷하게 만들어 쓰면 되겠다.

* 추가사항
 - 2008.11.14
  1. POST, GET 방식으로 Variables를 넘길 수 있도록 함
  2. requestHeaders를 추가할 수 있도록 함 (헤더를 보내는 경우 서버측 crossdomain.xml에 allow-http-request-headers-from 설정이 되어야 한다.)
  3. contentType(MINE Type)을 지정할 수 있도록 함
  이러한 방식은 AS3의 URLRequest에 있는 속성이므로 참고하길 바란다.
  사용예는 HTML상의 flashvars 참고하면 된다.


* 사용방법
 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 함수 목록등을 반환할 수 있는 함수를 만들 필요가 있다고 생각합니다.
 
 

[Flash Player 10]FileReference의 변경된 보안정책과 새롭게 추가된 기능에 대한 나의 생각
swfupload 공식홈페이지

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