UI 001 첨부 이미지 미리보기

 

const uploader = document.querySelector('.image_upload');

const previewImg = (e) => {
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  // 2️⃣ read의 행위가 종료되면 이벤트가 트리거 됨.
  reader.addEventListener("load", function () {
  	// 3️⃣ base64 인코딩 된 스트링 데이터가 result 속성에 담아지게 됨.
    document.querySelector('.preview img').src = reader.result;
    document.querySelector('.placeholder_txt').setAttribute('placeholder',file.name)
  },false)

  if (file) {
  	//1️⃣ readAsDataURL() 메서드는 특정 Blob 혹은 File에서 읽어오는 역할
    reader.readAsDataURL(file);
  } 
}

uploader.addEventListener('click',(e)=>{
  if(e.target.classList.contains('placeholder_txt')){
    document.querySelector('.input_file').click();
  }
})

document.querySelector('.input_file').addEventListener('change',previewImg)

 

✍ 공부한 내용

1. base64 

• 8비트 2진 데이터
• 바이너리 데이터를 스트링으로 변경하는 인코딩 방식
• 이미지나 오디오 같은 바이너리 데이터를 HTTP 같은 텍스트로 된 프로토콜로 보내기 위한 작업으로 통신 전송 과정에서 데이터의 손실을 막아 텍스트가 변형되지 않고 안전하게 전송됨.
• Base64로 인코딩하게 되면 데이터의 크기가 약 33% 늘어남. 그러나 통신과정에서 바이너리 데이터의 손실을 막기 위해 사용됨.
• ASCII는 7비트 인코딩인데 나머지 1비트를 처리하는 방식이 시스템 별로 상이 

2. File 

• File 객체는 FileList 객체에서 가져올 수 있음. 
• File에 대한 정보를 제공하고 자바스크립트가 해당 내용에 접근할 수 있는 방법을 제공
• 주로 파일 이름, 사이즈, 타입 등을 반환하고 모든 속성은 read-only이다.