FileReader.readAsDataURL()

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

 

readAsDataURL 메서드는 컨텐츠를 특정 Blob 이나 File에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, readyState 의 상태가 DONE이 되며,   loadend 이벤트가 트리거 됩니다. 이와 함께,  base64 인코딩 된 스트링 데이터가 result  속성(attribute)에 담아지게 됩니다.

문법

instanceOfFileReader.readAsDataURL(blob);

파라미터

blob
읽고자 하는 Blob 또는 File.

예제

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="이미지 미리보기...">

JavaScript

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

실행 결과

 

복수의 파일 읽기 예제

HTML

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>

JavaScript

function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // `file.name` 형태의 확장자 규칙에 주의하세요
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}
주의: FileReader() 생성자는 Internet Explorer 10 이전 버전에서는 지원하지 않는 기능입니다. 정상적으로 지원하는 코드를 확인하기 위해서는 다음 링크를 참조하시기 바랍니다. crossbrowser possible solution for image preview. 또는 this more powerful example.

명세

명세 상태 비고
File API
The definition of 'FileReader' in that specification.
Working Draft Initial definition

브라우저 호환성

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.6 (1.9.2)[1] 7 10[2] 12.02[3] 6.0
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support 32 3 10 11.5 6.0

[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all Blob parameters below were File parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the FileReader.error property returned a FileError object. This interface has been removed and FileReader.error is now returning the DOMError object as defined in the latest FileAPI draft.

[2] IE9 has a File API Lab.

[3] Opera has partial support in 11.1.

바깥 고리

문서 태그 및 공헌자

 이 페이지의 공헌자: kuil09
 최종 변경: kuil09,