JS) 이미지 미리보기

이미지 미리보기는 구글신의 도움과 해석을 넣어보았다. 이때 익명 function을 한번더 복습하게 된 계기가 되었다.

function readImage(event) {
  const eT = event.target;
  var reader = new FileReader();
  
  reader.readAsDataURL(eT.files[0]);

  reader.onload = e => {
    previewImage.src = e.target.result;
  }
}

inputThumbnail.addEventListener("change", readImage)

inputThumbnail == input type="file" 인데 이것이 바뀌게 되면 readImage function이 작동하도록 구현 했다. 처음에 구글에 여러가지 찾아 봤는데 readImage 자리에 e => { readImage(e.target) } 으로 작성한 사람들이 많아서 해석하기 어려웠지만 배웠던 내용을 회상하면서 해석했다.
원래 addEventListener가 동작하게 되면 해당 function에 기본적인 동작과 여러 정보를 담은 event라는 parameter를 넘기도록 되어 있다.
그렇기 때문에 function() 아닌 function으로 두고 js가 찾아서 parameter를 넣는다.
그래서 e로 하게 되면 e라는 익명 function이 생성되는데 e의 parameter가 가지고 있는 정보(inputThumbnail에 대한) 중 target을 readImage()의 파라미터에 넣는 구조로 해석 했다.

즉, e => { readImage(e.target)}; 의 모양은 e의 parameter로 inputThumbnail의 정보가 가게 되고 이 정보중 target을 readImage로 보내는 의미가 된다.

그 다음 target안에 있는 files의 url 정보를 reader를 통해 불러와서 reader.onload를 통해 이미지 소스에 넣게 되는 것이다.

파일 이름 가져오기

function getFileName() {
  const coursevideo = document.getElementById("coursevideo");
  var str = "";
  for(var i=0; i<coursevideo.files.length; i++){
      var str = str + coursevideo.files[i].name + " ";

    }
  document.getElementById("videoName").innerText = str;
}

console로 뒤져가며 확인해본결과 files[].name에 있는 것을 확인하고 추출해서 innerText를 활용해 넣는 작업이다.