[JavaScript] 자바스크립트에서 데이터 형식으로 파일 읽어오기

162_자바스크립트에서 데이터 형식으로 파일 읽어오기

[적용]

• DataURL을 가져오고 싶을 때

---

[문법]

메소드	의미	반환
readAsDataURL(파일)	DataURL*읽어 오기	없음

* MIME 타입 포맷을 가지는 데이터 문자열

---

[내용]

FileReader 객체를 사용해서 input 요소로 선택한 파일 데이터에 접근할 수 있다.

FileReader 객체의 readAsDataURL()를 사용해 파일을 DataURL 형식으로 읽을 수 있다.

비동기 형식이므로 addEventListener()를 사용해 읽기 작업 완료 이벤트인 load를 감시한다.

load 이벤트 완료 후 데이터에 FileReader 객체의 result 속성으로 접근할 수 있다.

 

HTML                                                                                                                                                              index.html

<input type="file"l id="myFile" accept=".png, .jpg"/>
<p class="log"><img /></p>

JavaScript                                                                                                                                                          main.js

const element = document.querySelector('#myFile');
const imgEl = document.querySelector('.log img');

// 파일 선택 기능
element.addEventListener('input', (event) => {
  const target = event.target;
  // 선택된 파일 참조
  const files = target.files;
  // 배열 타입이므로 0번째 파일 참조
  const file = files[0];
  
  // FileReader 인스턴스 생성
  const reader = new FileReader();
  
  // 읽기 작업 완료
  reader.addEventListener('load', () => {
    // 이미지 표시
    imgEl.src = reader.result;
  });
  // 텍스트 파일 형식으로 읽어오기
  reader.readAsDataURL(file);
});

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김