[JSP_AJAX] jQuery Ajax, Apache Commons Upload를 사용한 다중파일 업로드, 프로그레스 바 제작

지난번에 파일 업로드 프로그레스바 구현에 대한 글을 포스팅 한적이 있었습니다. 당시에는 단일 파일 업로드만 구현 했는데

이번에는 다중 파일 업로드 구현에 대해서 써볼까 합니다. 단일 파일 업로드 기능을 구현할때도 그랬지만 웹에서 파일업로드

기능 구현은 거의 해본적이 없습니다. 보통 OCX를 통한 파일 업로드 방식만  많이 사용해서 봐서 삽질을 많이 했네요.

일단 구현전에 괜찮은 파일 업로드 모듈을 찾아 봤습니다. 아무래도 제가 직접 제작하는것도 좋지만 저보다 뛰어난 분들이

만든 소스가 더 믿음직스러우니까요. 하지만 찾아보시면 보통 JS + Flash나 Flex를 사용한 파일 업로드 모듈을 보시게

될겁니다. 일반 PC환경에서면 크게 거슬리진 않지만 상황이 많이 나아지긴 했어도 모바일 환경하에서는 Flash 플레이어를

설치하지 않는 경우가 훨씬 많고 따로 설치 해야하는것도 은근히 번거롭게 느껴졌습니다. 그리고 요즘에 출시되는

스마트폰들은 성능이 좋지만 제가 현재 쓰고 있는 갤럭시U 모델의 경우 일반 웹도 버겁게 느껴질때가 많기 때문에 Flash나

Flex를 사용한 모듈은 배제하고 찾아보기로 했습니다. 그리고 다양한 기능보다는 파일업로드에 중점을 맞춘 모듈을 찾아보게

됐는데..

첫번째로 찾게 된것은 위와 같습니다. 제가 원했던 심플한 기능이었고 가장 맘에 들었던 것은 sumit 부분은 알아서 컨트롤 할 수

있게 되있다는 것 이었습니다. 그러나 input file을 css로 디자인 하게 되면 기능이 제대로  실행되지 않는다는 글을 보게 되서

쓰지 않게 됐습니다. (확실한 정보는 아닙니다.) 또 하나 찾게 됐던것은..

위와 같은 모듈입니다. (http://blueimp.github.com/jQuery-File-Upload/) 하지만 위 모듈의 경우 모바일 환경에서 일단 UI

때문에도 그냥 사용할 수도 없고 소스는 받아봤지만 커스터마이징 해서 쓰기에 시간이 너무 오래 걸릴것 같아 포기했습니다.

기능 자체는 상당히 깔끔하고 좋습니다. 한개 더 찾은 것 중에 쓸만하다 생각된것이 바로 아래와 같습니다. UI도 수정하기

크게 까다롭지 않고 플러그인 JS자체도 분석하기 수월 했습니다만.. 특정 ID를 가진 Submit버튼을 두고 전송을 해야해서

저의 경우 jQuery.form 의 ajaxSubmit()을 사용해야 할 필요가 있어서 패스하게 됐습니다.

보통은 찾아봤던 모듈들이 위와 같이 파일 업로드 자체만의 기능을 가지고 구현되어 있어서 다른 기능들에 포함해서

구현하려면 우선 모듈을 분석하는것이 먼저라 복잡하게 느껴져서 그냥 전부 패스 하고 직접 만들어 보게 됐습니다.

처음에 구현하려고 생각했던것이 위와 같은 형태입니다. '파일' 버튼(input type 'file'이 스타일링 된것)을 누르면 업로드

리스트가 추가되고 전송 버튼을 눌러 전송하는 형태 입니다. 위와 같이 구현하기 위해서는 가장 귀찮은 것이 파일추가 input

을 스타일링 하는 것입니다. 위 버튼의 경우 input file바깥의 div에 absolute position을 줘서 초과범위는 hidden 시키는

방법으로 input file을 숨겨놓은 형태입니다. 두번째로 문제가 되는것은 업로드할 파일 리스트 입니다. 업로드를 구현하는

back end(JSP,JAVA,PHP)는 구현하기 나름이겠지만 아래의 리스트에 파일 목록만 보일뿐 전송시에 input file의 value를

건네주지 못해서 구현 하나마나가 됩니다. 그러면 구현시 input file을 동적으로 생성하고 뿌려준다음 input file의 value를

주면 되지 않을까가 바로 생각나겠습니다만 보안상 이유로 input file의 경우 readonly 입니다. 때문에 사용자가 직접 파일을

선택하여 추가한 상태가 아니라면 value를 직접 set하는 것은 불가능 합니다. 예제에서는 위와 같이 스타일링 된 파일 버튼으로

파일을 선택하면 input file이 다시 동일 위치에 생성되며 이전의 element는 숨겨지는 형태입니다. 따라서 '파일' 버튼으로

다섯번 파일을 선택했다면 눈에 보이진 않으나 input file element가 다섯개가 생성된 상태입니다. 해당 내용은 예제내의

$("div#debug").text() 를 사용해서 뿌려보시면 이해가 가실 겁니다. 전에 포스팅한 글에서 예제로 업로드를 수행하는

부분의 스프링 MVC컨트롤러를 추가해뒀으므로 이번에는 JSP만 올려놓도록 하겠습니다. 항상 그랬지만 구현이 목적으로

실사용에 문제가 될 수 있는 부분도 있습니다. 이렇게 구현할 수도 있겠다 하는 방법만 보시면 되겠습니다.

multiuprogress.jsp

구현하고 보니 웹이 많이 발전하긴 했으나 파일입출력에 있어서는 아직 지원이 미흡하다는 느낌이 많이 드네요.

여담으로 HTML5에서는 위와 같은 꼼수를 쓰지 않고도 다중 파일 업로드를 구현할 수 있어 무척 반갑네요.

<input type="file" value="" name="upload[]" multiple>

위와같이 multiple 속성 선언으로 input의 '찾아보기' 버튼을 눌렀을때의 윈도우 다이얼로그에서 여러개의 파일을 선택할 수

있습니다. 저는 파이어폭스만 테스트 해봤으나.. 최신버전의 파이어폭스, 사파리, 크롬에서 작동한다고 합니다.