upload1 Articles

  1. 2007/04/16 Flex 파일 업로드 (4)
Flex 2007/04/16 23:51

Flex 파일 업로드

이번 졸업 작품으로 인터넷 디스크를 만들기로 하였다. 그런데 기존에 나온 인터넷 디스크와는 차별화 되게 만들려고 하는 중이다. 무엇을 차별되게 만들것이냐... 그것은 기존의 ActiveX의 기술을 사용하지 않고, Any where 로써 어느 pc나 인터넷 익스 플로러만 된다면 다운을 받을 수 있는 그런 인터넷 디스크를 만들어 볼려고 하였다. ^^;; 포부는 참 크다. ㅋㅋ

그래서 처음 생각 해 낸것이 Ajax였다. 요새 한창 뜨고 있는 Ajax를 사용 한다면 파일 업로드를 쉽게 구현 할 수 있고 어는 인터넷 브라우저나 쉽게 받을 수 있다고 생각을 난 했었다. 그런데 그것은 나만의 오산 이였다. ㅡ.ㅡ; 왜 그렇냐 하면 Ajax 기술을 어차피 자바 스크립트를 사용하는 것인데, 자바 스크립트 자체가 파일 읽기 쓰기가 미약 하다고 할 수 있었다. (검색만 조금 해봐도 안되는 이유가 참 쉽게 나온다.) 구현은 물론 어떻게 든 할 수는 있다는 얘기를 듣기는 했지만...

내가 생각 했던 방향으로 흘러 가지 못해서 고민에 빠졌었다. 그런데 문득 Flex를 사용 해보라는 주변 얘기도 있고,, 해서 Flex로 방향을 돌렸다. 요새 한참 주가를 올리고 있는 이 Flex스라는 놈 ^^;; 한마디로 Flash 를 이용해 프로그램을 한다는 것이다.

그렇다. Flex는 Flash player 를 사용 하는데, 윈도우 익스플로러는 물론, X-Window 의 파이어 폭스, 심지어 맥 OS의 사파리에서까지 설치가 되 있다. 이놈을 이용한다면, 우리가 생각 했던 Any where의 성격을 가질수 있을 것이다. 그렇다면 우리 프로젝트의 염원인 파일 업로드 기능이 가능할 것이다.

일단 먼저 Flash 나 Flex를 사용한 프로그램을 찾아 봤는데 나의 블로그 옆의 링크에 보면 이미지 편집 사이트가 플랙스로 만든 사이트 이다. 그곳에서 이미지를 올릴때 아무런 컴포넌트 없이 파일을 올릴 수 있게 되어 있다. 이런 기능이라면 구현 할수 있을 것이라 말이 된다. 특정 운영체제에 독립적인 인터넷 디스크가 아닌 멀티 운영체제에서도 가능한...

그래서 일단 만들기 전에 이놈을 한번 알아 봐야 하지 않을까 하는 생각에서 관련 소스를 뒤져 봤다. 그런데 쉽게도 찾을수 있었다. 파일 업로드 부분의 소스를. 다행이도 쉽게 업로드 하는 부분이 있었다. 단지 파일 전송 현황이나, 그런 부분은 추가 해야 하겠지만, 기본적인 기능을 수행할 수 있었다.

그런데 단지 대용량의 파일은 좀더 고민을 해 보아야 할 것 같다.

일단 톰캣 프로그램을 설치 한다. 난 쉽게 하기 위해서 톰캣을 C:\에 설치 하였다. 그럼 다음과 같은 설치 구조가 된다.


 

User inserted image

그 후 첨부된 소스 파일에 java 부분을 C:\Tomcat 5.0\webapps 의 경로에 복사 한다. 복사 할때 폴더 이름을 java에서 upload로 바꾸어 준다. 그런 다음 Tomcat을 재 시작 시킨다음 다음 주소로 들어가 보자.

http://localhost:8080/upload/upload

위의 주소로 들어가 보게 되면 다음과 같은 화면이 나오게 될 것이다.


User inserted image


위와 같은 화면이 보이게 된다면, 이제 파일을 받을 서블릿은 준비가 완료된 것이다. 그럼 이제 flex 폴더의 mxml의 파일을 설정 해보자. 물론 플렉스 데이터 서비스 프로그램을 돌려 서비스할 수도 있겠지만... 쉽게 플랙스 빌더를 사용하였다. 플랙스 빌더를 사용 하여 새 응용 프로그램을 생성하고 소스에 mxml 을 붙여 넣은후 컴파일 하면 다음과 같이 창이 익스플로러 창이 보일 것이다.



 

빌드하기전 그대로 빌드 하지 말고 다음과 같은 수정 사항이 필요하다

proceedWithUpload 의 매서드에서
var urlRequest:URLRequest = new URLRequest(http://localhost:8080/upload);
                    file.upload(urlRequest,"FileData",false);
의 부분을
var urlRequest:URLRequest = new URLRequest(http://localhost:8080/upload/upload);
                    file.upload(urlRequest,"FileData",false);
로 변경해준후 컴파일 한다.



User inserted image

그런다음 파일 추가를 눌러 파일을 선택 하면 yes no 를 선택 하라고 할 것이다. 그런 다음 yes를 선택 하게 된다면 파일이 전송될 것이다. 전송된 파일의 확인은 톰캣의 폴더에서 확인 하면 전송된 파일의 목록을 볼수 있을 것이다.



User inserted image

업로드시 서블릿에서 지정 한 사이즈 보다 크게 되어, 다음과 같은 에러가 나게 된다. 서블릿의 사이즈를 크게 해주어야 에러가 나지 않을것이다...


User inserted image



div>