struts2, ajax, json, IE - FileUploader

우리 회사 프로젝트는 2009년도에 만들어진 꽤나 오래된 프로젝트이다.

비전공자에 최신기술로 공부하고 온 나에게는 너무나 낯설고 어렵게 느껴졌으나,

단 한명의 팀원으로 만 9개월이 살짝 넘는 시간동안 갖은 유지보수를 해보며 실제 개발실력은 많이 부족하지만 이제 조금씩 익숙해지고 있다.

 

 

2020년 12월로 Adobe에서 flash의 지원을 중단하면서, 모든 브라우저에서도 지원을 중단하겠다는 알림이 계속 뜨고 있었다.

우리 회사에도 꽤나 많은 곳에 swf 파일을 사용한 flash 기능들이 사용되고 있었는데, 가장 시급한 것은 upload 기능이다.

swf파일을 fla파일로 변환 후 Adobe의 animate프로그램을 이용하여 html5로 변환하려 했지만... animate 는 ActionScript3.0 부터 지원하고, 해당 파일은 ActionScript 2.0 버전........... ㅂㄷㅂㄷ...

ActionScript2.0 버전의 swf 파일도 js로 변환이 가능한 오픈소스를 사용하려 했으나, 내부의 어떠한 문법때문일지.. 변환이 잘 되지 않았고, 3.0으로 변환하거나 안맞는 부분을 찾는 것이 쉽지 않았다.

 

 

---

* swf -> js 오픈소스 : swf2js.js

https://github.com/swf2js/swf2js

swf2js/swf2js

swf2js.com/free/index.html

swf2js SWF/FlashをHTML5に変換、JavaScript製FlashPlayerエミュレーター

---

프로젝트 내 flash uploader 의 특징은 이러했다.

 

1. 커스텀태그로 이루어져, java에서 html 태그를 스크립트 방식으로 리턴.

2. 비동기방식으로 업로드 할 파일 선택 시 이미 파일이 서버에 저장 후 저장된 이미지나 DB에 저장된 파일명 노출.

3. type=hidden인 input 태그에 java에서 임의로 생성된 attach_key만 남겨짐. (input[type=file]을 포함한 모든 input을 아우르는 form태그를 한번에 submit하는 방식)

 

 

그래서 내가 새로 개발해야하는 업로더는 이러한 특징들이 필요했다.

 

1. 똑같이 커스텀태그를 정의하는 java 파일에서 html 태그를 생성.

2. 비동기방식으로 파일을 저장 후 저장된 이미지나 파일명 노출.

3. type=hidden인 input 태그에 java에서 임의로 생성된 attach_key만 남김.

 

 

커스텀태그를 그냥 바꿔버리면 어떨까 할 수도 있지만,

업로드를 사용하고 있는 페이지가 한두개가 아니다... 사용하는지 알 수도 없는 너무 많은 파일들이 쌓이고 쌓여 search 했을 때 나오는 upload 태그만 355개...!! 이걸 다 바꿀 수는 없었다.

(오히려 커스텀 태그를 사용하기 때문에 더 간단하게 기능을 변형할 수 있었다)

 

 

커스텀태그를 새로 생성하여 .tld파일에 정의해주고 script를 짰다.

(java에서 script로 보낼 때, script태그가 포함되어있을 시, 커스텀태그 로드되며 바로 script 태그 안의 함수도 바로 시행됨)

비동기방식을 위해 ajax를 사용하기로 했다.

하지만 대부분 IE에서 기능하는 것이 많은 프로젝트에서는 ( 뗴이쒸ㅜㅜㅜ ) 정말 까다로운 일이었다.

IE7이상의 버전에서는 동작하지 않는 FCKEditor를 사용하고 있기에... 더 많은 제약이 있었다.

 

 

개발하다가 IE7에서 제공되지 않아 발목 잡혔던 기능: formData 타입, input[type=file]의 multiple 속성, java로 보낼 때의 multipart Type, javascript의 append 함수.....

 

 

 

출처: https://developer.mozilla.org/ko/docs/Web/API/FormData

 

플래시에서는 다중파일업로드가 가능하게 되어있으나 IE9 이하에서는 html5를 제공하지 않으므로... multiple 속성을 사용할 수 없다.

 

또한 이미 form태그 안에 있는 input태그에서 비동기식 파일업로드를 해야 했기에, input태그의 value만 ajax로 파일만 넘겨주려 했으나.... struts2 에서 form태그 전체를 넘기는 방식은 많았지만, input 태그의 value만을 넘기는 방식은 찾아보기 어려웠다...

 

 

---

* struts2의 파일업로드 도큐먼트

https://www.tutorialspoint.com/struts_2/struts_file_uploads.htm

Struts 2 - File Uploads - Tutorialspoint

---

 

 

이런 저런 이유로!!

IE 호환성 버전을 11로 높인 팝업창을 띄우기로 결정!

1. 커스텀태그에서 태그의 속성값을 파라미터로 넘기는 버튼을 생성.

2. 버튼 클릭시 업로드 팝업을 띄움(파라미터에 값을 가지고 있는 get 방식 : 어차피 개인정보 들어간 것도 아니니 굳이 post 방식을 쓸 필요가 없다고 느낌.)

3. 팝업창에서 제이쿼리 및 ajax를 이용하여 서버로 file 전송. (첨부파일의 경우, 파일 전송 후 DB에 적재)

4. DB나 서버에 해당 파일이 있는지 확인 후 확인된 파일명 노출.

 

업로드 방식은 form 태그 자체를 ajax로 java로 넘기는 방식. formData 타입 사용하여 파일데이터를 보낸다.

 

- 사용하는 라이브러리: commons-io-1.3.2.jar, commons-fileupload-1.2.1.jar

- 오픈소스: jquery-1.7.2.min.js, jquery.form.js

 

---

malsup.github.com/jquery.form.js

---

 

이 후로는 파일 업로드를 작성하면서 생겼던 이슈들을 정리하고자 한다.