FileReader.readAsDataURL()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

readAsDataURL メソッドは、指定されたBlob または File の内容を読み込むために使用されます。読み込み操作が終了すると、readyStateDONE となり、loadend が発生します。このとき、result 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。

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

構文

js
readAsDataURL(blob)

引数

blob

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

返値

なし (undefined)。

HTML

html
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="画像のプレビュー" />

JavaScript

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

  reader.addEventListener(
    "load",
    () => {
      // 画像ファイルを base64 文字列に変換します
      preview.src = reader.result;
    },
    false,
  );

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

ライブ結果

複数ファイルを読み取る例

HTML

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

JavaScript

js
function previewFiles() {
  const preview = document.querySelector("#preview");
  const files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // `file.name` が拡張子の基準と一致していることを確認します。
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      const reader = new FileReader();

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

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    Array.prototype.forEach.call(files, readAndPreview);
  }
}

メモ: Internet Explorer 10 以前では FileReader() コンストラクターに対応していません。十分な互換性が必要とされるときは、画像プレビューのクロスブラウザー対応ソリューションまたはもっと強力な例を参照してください。

仕様書

Specification
File API
# readAsDataURL

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
readAsDataURL

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報