[웹앱 맨땅에 헤딩일기] - 파일 미리보기 이벤트

언제든 코드에 대한 반박은 환영합니다... 알려주세요 더 좋은 방법을!!!

 

 

파일을 업로드 하거나 다른 파일 이름을 누르면 이미지를 미리보기하는 이벤트 입니다.

 

그리고, 이미지 파일이 아니면 대체 이미지를 보여줄 수 있게 코드를 만들어봤어요.

 

 

function loadPreviewImage(obj) {
  var reader = new FileReader();
  reader.onload = function() {
    $('#Image').attr('src', this.result);
  };
  var fileInput = document.querySelector('#' + obj.className.split(' ')[1]);
  var file = fileInput.files[0];
  if (file.type.match('image.*')) {
    reader.readAsDataURL(file);
  } else {
    // 대체 이미지를 보여줄 경로
    var placeholderImageSrc = 'path/to/placeholder/image.jpg';
    $('#Image').attr('src', placeholderImageSrc);
  }
}

obj.className.split(' ')[1]의 이유는 class Name [1]에 파일명이 있기 떄문이에요!!