[JS] 이미지 프리뷰 적용하기

오늘은 심플하게 이미지 프리뷰(Image Preview)를 설정하는 방법을 간단하게 작성해볼까 합니다. 

// input file 내의 파일이 업데이트 될때마다 호출합니다.
$('#input').on('change', function(e) {
  let file = this[0];
  if(file) {
    previewImage(file.files, '#img');
  }
})

// 이미지 파일과 입력할 DOM id 를 파라미터로 받습니다.
function previewImage(files, id) {
  let [file] = files;
  if (file) {
    $(id).prop('src', URL.createObjectURL(file));
  }
}

 

그리고 HTML 파일입니다. 

<input type="file" id="input" accept="image/jpeg, image/gif, image/png">
<img src="" alt="" id="img" style="margin-top: 10px; width:100%; height:auto;">