파일 업로드 관련한 Async 처리를 하다 보면
언제나 IE 에서 처리가 달라서 애를 먹게 되죠.
IE8 이상 호환을 기준으로 삼고 있는 fronteer.kr 에서 사용중인
파일업로드 관련 plugin 은 jquery.uploadfile.js 입니다.
최근에 markdown editor 를 새롭게 준비하면서
editor toolbar 에 이미지파일 업로드 기능을 지원하기 위해서
jquery.uploadfile.js 를 활용하려고 했더니
기본적으로 표시되는 정보가 많아서 toolbar 에 놓기가 어려웠습니다.
파일업로드는 input type="file" 을 이용해야만 하는데
이 경우 보안제약상 다른 버튼이나 링크와 연동해서 파일을 열수는 없고
반드시 직접 input type="file" 요소를 클릭해야만 하기 떄문에
toolbar 에 반드시 포함을 시켜야 합니다.
(즉, 다른 곳에 놓을 수는 없다는 거죠.)
css 로 크기등을 조정해서 toolbar 내에 위치시킬수는 있지만
더 중요한 문제는 파일업로드 과정의 성공/실패 메시지나
진행상황 (또는 진행중) 표시등을 toolbar 용도에 맞게 변경할 필요가 생겼습니다.
그래서 jquery.uploadfile.js 소스를 부분적으로 수정해서
- 기본적으로 jquery.uploadfile.js 의 정보표시영역은 감추고
- 파일업로드 진행상황은 진행중일때 spinner (로딩중 이미지) 를 표시
- 업로드 성공 또는 실패시 spinner 를 제거
- 업로드과정에서 에러가 발생한 경우 메시지는 alert 형태로 표시
이 정도 수준에서 정리해 두었습니다.
이를 편의상 최소모드(fxSecretMode) 라 정하고
jquery.uploadfile.js 옵션을 추가해서 처리했습니다.
수정된 소스는 아래 참조
