input type file onclick event not working (클릭 이벤트 오류)

프로젝트를 진행하는 중 input type="file" 컨트롤의 클릭이벤트가 안되는 현상이 일어났었습니다.
정상적으로 body에 <input type="file" id="fileInput1" name="fileInput1"> 이런식으로 컨트롤을 생성한 경우라면 그럴리가 없겠지만 저는 스크립트에서 해당 컨트롤을 생성해서 발생하는 문제였습니다.

만약 정상적으로 body에 생성했는데 클릭 이벤트가 안된다면(...찾아보기 버튼을 클릭하지 않고 스크립트를 이용한 이벤트) 이유는 ie9 이하를 사용하는 경우이고 이럴때는 답이 없습니다.
(컨트롤에 Trigger 등의 이벤트를 생성해서 click이벤트를 걸우준 경우는 ie9 이하에서는 에러를 발생 합니다.)




여기서는 input type file 컨트롤을 아래와 같이 스크립트에서 생성한 경우 ie10 과 windows7의 ie11에서의 click 이벤트가 실행되지 않는 에러에 대해서 알아보겠습니다.
(windows10에서 기본 제공하는 ie11에서는 에러 없이 잘 실행 됩니다.)

먼저 컨트롤을 생성합니다.

this._fileInput = document.createElement("input");
this._fileInput.type = "file";
this._fileInput.multiple = true;
this._fileInput.click(); => 클릭 이벤트 실행 안됨

이렇게 생성하거나 또는

var inputFileControl = document.create("input");
inputFileControl.setAttribute('type','file');
inputFileControl.onchange= function(){
 alert("change test");
}
inputFileControl.click(); => 클릭 이벤트 실행 안됨




해결은 정말 정말 간단했습니다.
document에 생성한 해당 컨트롤을 append 시켜주면 끝나는 것입니다.

this._fileInput = document.createElement("input");
this._fileInput.type = "file";
this._fileInput.multiple = true;
$(document).append(this._fileInput); => 추가
this._fileInput.click(); => 정상적으로 실행됨

또는 이렇게 생성된 경우라면

var inputFileControl = document.create("input");
inputFileControl.setAttribute('type','file');
inputFileControl.onchange= function(){
 alert("file change!");
}
document.Selector('body').appendChild(inputFileControl); => 추가
inputFileControl.click(); => 정상적으로 실행됨

어떠세요? ie는 워낙 많은 경우의 수들이 있어서 위의 처리 방법이 정답이라고 자신있게 말하기는 어렵습니다.




저같은 경우 프로젝트를 하면서 위의 문제가 생겨 별별별 행동을 다 했었습니다.
(환경은 windows7 ie11 입니다.) ie11을 지우고 다시 설치해보고, 윈도우 업데이트가 없을 때까지 업데이트를 몇번이고 해보고 인터넷 옵션을 이리저리 바꿔보기도하고요...
하지만 무엇하나 해결은 되지 않았습니다.

저와 같은 경우 상기의 방법으로 해결되는 분들이 계시다면 그것으로 만족합니다.ㅎㅎㅎ

그럼 이상으로 input type file onclick event not working (클릭 이벤트 오류)에 대해서 알아보았습니다.
오늘도 행복한 하루 되세요~~~^^