[자바스크립트, HTML] 이미지 파일 미리보기

작성일 : 2020. 5. 24.

 

HTML 파일 객체가 있다.

<input type="file" multiple id="selectedfiles" style="opacity:0; position:relative; height:0;">
<div id="이미지 파일 목록"></div>

 

위의 컨트롤을 클릭, 파일 다이얼로그에서 선택한 파일 (특히 이미지)을 확인하는 방법이다.

 

첫째) 마크업 자체에서 제어할 수 없으므로 자바스크립트(이하 js로 명명)에서 해당 컨트롤에 대해 리스너를 등록한다.

 

$('#selectedfiles').change(selectedFileHandler);
/*
'change' 이벤트 발생 시 아래의 함수를 실행한다.
'change' 이벤트의 경우, 이전에 선택한 파일을 또 선택하면 발생하지 않는다. 이를 위해 'click' 이벤트 발생 시에 처리하려고 시도하였으나 의도한대로 작동하지 않기에 결국에는 'change' 로 돌아올 수 밖에 없었다.
*/
둘째) 리스너 함수를 구현한다. 가독성을 위해 별도로 구현한다.
selectedFileHandler = function(event) {
        var files = event.target.files;// 파일 컨트롤에서 선택한 파일을 모두 가져오는 코드
        var htmlStr = '';
        for (var x=0; x < files.length; x++) {
               /*
               HTML5 부터 지원하는 객체;
               <input type='file'> 컨트롤에서 선택한 파일 중 1개를 기준으로 처리할 수 있다.
               따라서 multiple 인 경우 loop 구문에서 매회 새로운 인스턴스를 생성해야 함.
               */
               var reader = new FileReader();
               reader.onloadend = function(e) {
                             // [2] 아래의 readAsDataURL(파일) API 보다 더 중요한 처리 부분은 이 영역이다.
                             var quote_base64_img = '\'' + e.target.result + '\'';
                             htmlStr += '<a href="showImg(' + files[x] + ')">' + files[x].name + '</a><br>';
               };
               reader.readAsDataURL( files[x] ); // [1] 파일을 base64 포맷으로 읽어들인다.
        }
}