File API

1-blue·2021년 11월 15일
0

📀 JavaScript 📀

목록 보기
6/11

소개

브라우저에서는 보안을 위해서 파일을 읽기만 가능하다.
기본적으로 <input type="file" />방식으로 파일을 입력받는다.

1. File과 FileList

<input type="file" multiple class="input-files" />

<script>
  document.querySelector(".input-files").addEventListener("change", e => {
    console.log(e.target.files);	// FileList를 반환한다.
    // FileList는 유사배열이며, 각 인덱스마다 File객체를 가지고 있다
    // File객체에는 사용자가 input으로부터 넣은 파일에 대한 정보를 가지고 있다.
  });
</script>

2. FileReader

File객체를 지정된 형식으로 읽는데 사용한다.

  • readAsText: 일반 텍스트로 읽음 ( .txt )
  • readAsDataURL: base64로 인코딩함... 이미지 처리 ( .jpg )
  • readAsArrayBuffer: ArrayBuffer 객체로 반환 ( .mp4 )
  • readAsBinaryString: 바이너리로 읽음

2.1 readAsText 예시 ( 텍스트파일 읽기 )

<body>
  <input type="file" accept="*/*" class="input-text-file" />

  <textarea class="t-a" cols="30" rows="10"></textarea>
  <div class="preview" />

  <script>
    document.querySelector(".input-text-file").addEventListener("change", e => {
      // 파일리더생성
      const textFileReader = new FileReader();

      // 파일처리를 성공했을 때 실행할 이벤트 등록
      textFileReader.onload = (event) => {
        document.querySelector(".t-a").innerHTML = event.target.result;
      }

      // 파일을 텍스트형태로 읽음
      // e.target.files는 FileList로 input으로 받은 파일은 File이 들어가 있음
      textFileReader.readAsText(e.target.files[0]);
    });
  </script>
</body>

2.2 readAsDataURL 예시 ( 이미지 파일 읽기 )

<body>
  <input type="file" accept="image/*" class="input-image-file" />

  <div class="preview" />

  <script>
    document.querySelector(".input-image-file").addEventListener("change", e => {
      // 파일리더생성
      const textFileReader = new FileReader();

      // 파일처리를 성공했을 때 실행할 이벤트 등록
      textFileReader.onload = (event) => {
        document.querySelector(".preview").style = `background-image: url("${event.target.result}")`;

        console.log(event.target.result);
        console.log(event);
      }

      // 파일을 base64형태로 
      textFileReader.readAsDataURL(e.target.files[0]);
    });
  </script>
</body>

참고한 사이트

0개의 댓글