FileReader.readAsDataURL()

readAsDataURL メソッドは、指定された Blob ないし File オブジェクトを読み込むために使用します。読込処理が終了すると readyStateDONE に変わり、 loadend イベントが生じます。それと同時に result プロパティにはファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。

メモ: blob の result は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から data:*/*;base64, を削除しておく必要があります。

構文

instanceOfFileReader.readAsDataURL(blob);

引数

blob
メソッドで読み込む Blob または File オブジェクトです。

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

JavaScript

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

  reader.addEventListener("load", function () {
    // convert image file to base64 string
    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) {

    // Make sure `file.name` matches our extensions criteria
    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);
  }

}
メモ: Internet Explorer 10 以前では FileReader() コンストラクターに対応していません。十分な互換性が必要とされるときは crossbrowser possible solution for image preview または this more powerful example を参照してください。

仕様書

仕様書 状態 備考
File API
FileReader の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
readAsDataURLChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32
補足
完全対応 32
補足
補足 Using the camera in Android 8.x raises an exception. See bug 1511083.
Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報