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="画像のプレビュー...">

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 () {
    // 画像ファイルを base64 文字列に変換します
    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);
  }

}
メモ: 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 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 32
補足
完全対応 32
補足
補足 Using the camera in Android 8.x raises an exception. See bug 1511083.
Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.0

凡例

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

あわせて参照