파일 업로드 INPUT TYPE="FILE"과 클릭 이벤트 오류

웹 페이지에서 파일 업로드 시 <input type="file">이 포함된 태그를 사용하게 되는데,

두 가지 중요한 문제가 있다.

하나는, 해당 태그는 라벨(Label)을 수정할 수가 없다. 따라서 브라우저 종류에 따라

화면 상에 그대로 "Browse..." 또는 "찾아보기...", "Choose File..." 등과 같은 고정 문구로 표시된다.

이것을 다른 문구로 바꾸는 방법은 여러 가지가 있는데, 가장 좋은 방법은 아래 URL처럼

이중 레이어로 처리하는 방법이다.

>> 참조: http://www.quirksmode.org/dom/inputfile.html

쉽게 말해, 파일 선택 버튼을 투명 처리한 다음 그 아래에 사용자 정의 버튼을 놓는 방법이다.

단, 이 방법은 세밀한 좌표 계산 및 각 브라우저 별 테스트에 많은 시간이 필요하기 때문에

그다지 유용하다고 보기는 어렵다. 아예 샘플 라이브러리로 만들어 두었다면 모를까.

그래서 대부분 어쩔 수 없이 그냥 있는 그대로 쓴다.

두 번째 문제는, <input type="file">을 숨기고 다른 태그/버튼 등을 클릭했을 때

Javascript로 파일 클릭 이벤트를 강제로 발생시켜 파일을 선택하는 경우

IE 9 버전 이하 브라우저에서는 파일 업로드가 되지 않거나 오류가 발생하는 문제이다.

submit 버튼을 화면 상에 표시하고 클릭하는 경우에는 선택된 파일이 사라지거나(IE 9의 경우),

submit 버튼을 두 번 클릭해야만 업로드가 되는 경우도 있고(IE 8의 경우),

특히,

Javascript로 submit 버튼을 클릭하도록 시뮬레이션할 경우에는 위 그림과 같은 오류가 발생한다.

var obj = document.getElementById("btnSubmit");

if (obj.click) {

    obj.click(); // ---> SCRIPT5: Access is denied

}

else if (obj.onclick) {

    obj.onclick();

}

이는, IE 9 이하 버전에서 파일 선택 기능이 포함된 경우 사용자가 명시적으로 파일을 선택하지 않으면

FORM POST로 업로드할 수 없도록 강제로 제한해 둔 기능이라 어쩔 도리가 없다.

IE 10 이상 버전 및 크롬, 파이어폭스 등 타 브라우저에서는 그런 현상이 없다.

따라서, IE 9 이하 버전을 지원해야 한다면 navigator.userAgent에서 IE 버전을 체크하여

IE 9 이하라면 <input type="file"> 태그를 숨기지 말고 그냥 화면 상에 보여 주거나,

아니면 위 URL의 방법대로 이중 레이어로 만드는 방법을 사용해야 한다.

문제는,

웹 브라우저뿐만 아니라 다른 프로그램(예: 아웃룩 등)에 임베딩된 환경까지 함께 지원해야 하는 경우에는

navigator.userAgent값으로 IE 버전을 체크하는 것만으로는 부족하다.

왜냐하면 IE 임베딩 환경의 경우에는 항상 "MSIE 7"로 고정된 값이 사용되기 때문이다.

>> 참조: Embedded IE(Internet Explorer) 버전 처리(http://thermidor.tistory.com/1387)

따라서 실제 IE 10 이상이 설치되어 있는지 여부를 판단하는 추가적인 방법이 필요하다.

(예를 들면, HTML5 관련 기능, 즉, window.Blob 이 활성화되어 있는지 등으로 판단할 수 있다.)

if (window.Blob && window.File && window.FileList && window.FileReader) {

    ....

}

끝.