[JQuery] input type=file 태그 CSS 변경하기(trigger())

$('#inputTypeFile').trigger('click');

trigger() : 강제로 이벤트를 발생시키는 JQuery 함수

<input type="file">

위의 태그는 CSS로 수정하기 참 까다로운 태그입니다.

위의 태그를 직접 수정하는 내용은 다루지 않고 비슷한 효과를 낼 수 있는 방법이 trigger() 를 이용하는 것입니다.

예를 들어 아래와 같은 페이지에서 프로필 사진을 클릭하여 파일을 선택하고 싶은 경우

<input type="file" id="profileFile" style="visibility:hidden;">

이렇게 input 태그를 보이지 않게 설정한 뒤 사진의 클릭 이벤트가 발생할 경우 input 태그에 강제로 click 이벤트를 발생시키는 방법이 있습니다.

코드를 보면 이미지 태그와 파일 태그가 각각 아래와 같을 때

<img src='/defaultImg.png' class='profileImg' id='profileImg'>
<input type="file" id="profileFile" style="visibility:hidden;" >

자바스크립트를 아래처럼 작성하면

$(document).on('click', '#profileImg', function(){
    $('#profileFile').trigger('click');
});

아래 사진 처럼 프로필 이미지를 클릭했을 때 input태그가 클릭됬을 때의 효과를 볼 수 있습니다.