JavaScript でのローカルファイルの読み込み

By Eric Bidelman

公開:: 6月 18th, 2010 Comments: 42

はじめに

HTML5 では、File API 仕様を介してローカルファイルとやり取りする標準的な方法が用意されています（以下、リンク先はすべて英語）。たとえば、File API を使用すると、画像をサーバーに送信する際に画像のサムネイルプレビューを作成したり、ユーザーのオフライン時にアプリでファイル参照を保存したりできます。さらに、クライアントサイドロジックを使用して、アップロードの mimetype をファイル拡張子と照合したり、アップロードのサイズを制限したりすることもできます。

この仕様では、「ローカル」のファイルシステムからファイルにアクセスするための複数のインターフェースが提供されています:

File - 単一のファイルです。名前、ファイルサイズ、mimetype、ファイルハンドルへの参照など、読み取り専用の情報を提供します。
FileList - File オブジェクトが配列のように並んだシーケンスです（<input type="file" multiple>、または複数のファイルを含むディレクトリをデスクトップからドラッグ）。
Blob - ファイルをバイト範囲でスライスできます。

上記のデータ構造を組み合わせて使用すると、FileReader インターフェースから標準的な JavaScript イベント処理を通じてファイルが非同期に読み取られます。その結果、読み取りの進行状況を監視したり、エラーを検出したり、読み込みの完了を確認したりできるようになります。多くの点で、この API は XMLHttpRequest のイベントモデルに似ています。

注: このチュートリアルの作成時点で、ローカルファイルの処理に必要となる API がサポートされているのは Chrome 6.0 と Firefox 3.6 です。Firefox 3.6.3 以降では、File.slice() メソッドをご利用いただけません。

ファイルの選択

まず、お使いのブラウザが File API に完全に対応しているかを確認します:

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

アプリでこれらの API の一部しか使用しない場合は、このスニペットを適宜修正してください。

ファイル選択にフォーム入力を使用する

最も簡単なファイル読み込み方法は、標準の <input type="file"> 要素を使用することです。JavaScript は、選択された File オブジェクトのリストを FileList として返します。以下の例では、複数のファイルを一度に選択できるように「multiple」属性を使用しています:

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

例: ファイル選択にフォーム入力を使用する例です。ぜひお試しください。

ファイル選択にドラッグ＆ドロップを使用する

ファイル読み込みのもう 1 つの方法として、デスクトップからブラウザにネイティブのドラッグ＆ドロップを行うことができます。前の例を少し修正すると、ドラッグ＆ドロップに対応できます。

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>

例: ファイル選択にドラッグ＆ドロップを使用する例です。ぜひお試しください。

ここにファイルをドロップ

注: 一部のブラウザでは、<input type="file"> 要素がネイティブドロップのターゲットとして扱われます。前の例で、入力フィールドにファイルをドラッグしてみてください。

ファイルの読み取り

さて、ここからがいよいよ面白くなります。

File 参照を取得したら、FileReader オブジェクトをインスタンス化してコンテンツをメモリに読み取ります。読み込みが終了すると、リーダーの onload イベントが開始され、result 属性を使用してファイルデータにアクセスできるようになります。

FileReader にはファイルを非同期で読み込むためのオプションが 4 つあります:

FileReader.readAsBinaryString(Blob|File) - result プロパティにはファイル/ブロブデータがバイナリ文字列として格納されます。各バイトは、0～255 の範囲の整数で表されます。
FileReader.readAsText(Blob|File, opt_encoding) - result プロパティにはファイル/ブロブデータがテキスト文字列として格納されます。デフォルトでは、この文字列は「UTF-8」としてデコードされます。オプションのエンコードパラメータを使用すると、他の形式を指定できます。
FileReader.readAsDataURL(Blob|File) - result プロパティにはデータ URL としてエンコードされたファイル/ブロブデータが格納されます。
FileReader.readAsArrayBuffer(Blob|File) - result プロパティには、ファイル/ブロブデータが ArrayBuffer オブジェクトとして格納されます。

これらの読み込みメソッドのいずれかが FileReader オブジェクトで呼び出されると、onloadstart、onprogress、onload、onabort、onerror、onloadend を使用して進行状況を追跡できるようになります。

以下の例では、ユーザーが選択したファイルから画像を選別し、対象ファイルで reader.readAsDataURL() を呼び出し、データ URL に「src」属性を設定してサムネイルを表示しています。

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

例: ファイルの読み取り例です。ぜひお試しください。

画像を含むディレクトリで試してみてください。

ファイルをスライスする

ファイル全体をメモリに読み取ることが最適でない場合もあります。非同期のファイルアップローダを記述する場合を例に挙げます。アップロードの速度を上げる 1 つの方法として、ファイルをバイト範囲のチャンクに分割して読み取り、送信することができます。ファイルのコンテンツは後でサーバーコンポーネントによって正しい順序に再構築されます。

幸いなことに、File インターフェースはこの使用方法を処理できるスライスメソッドに対応しています。このメソッドは、1 番目の引数として開始バイト、2 番目の引数として終了バイト、3 番目の引数としてオプションのコンテンツタイプストリングを使用します。このメソッドのセマンティックは最近変更されたため、ベンダープレフィックスが追加されています:

if (file.webkitSlice) {
  var blob = file.webkitSlice(startingByte, endindByte);
} else if (file.mozSlice) {
  var blob = file.mozSlice(startingByte, endindByte);
}
reader.readAsBinaryString(blob);

以下の例では、ファイルを複数のチャンクに分けて読み取っています。注目すべき点は、onload イベントを使わずに、onloadend を使用して evt.target.readyState をチェックしているところです。

<style>
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>

<script>
  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('byte_content').textContent = evt.target.result;
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    if (file.webkitSlice) {
      var blob = file.webkitSlice(start, stop + 1);
    } else if (file.mozSlice) {
      var blob = file.mozSlice(start, stop + 1);
    }
    reader.readAsBinaryString(blob);
  }
  
  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);
</script>

例: ファイルをスライスする例です。ぜひお試しください。

読み取るバイト範囲:

読み取りの進行状況を監視する

非同期のイベント処理を使用すると、ファイル読み取りの進行状況を監視したり、エラーを検出したり、読み込みの完了を確認したりできるようになります。この機能はサイズの大きいファイルが複数ある場合に便利です。

onloadstart イベントと onprogress イベントを使用して、読み取りの進行状況を監視することができます。

以下の例では、読み取りステータスを監視する進行状況バーを表示しています。進行状況インジケータを実際に表示するには、サイズの大きいファイルかリモートドライブのファイルを試してみてください。

<style>
  #progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
  #progress_bar.loading {
    opacity: 1.0;
  }
  #progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }
</style>

<input type="file" id="files" name="file" />
<button onclick="abortRead();">Cancel read</button>
<div id="progress_bar"><div class="percent">0%</div></div>

<script>
  var reader;
  var progress = document.querySelector('.percent');

  function abortRead() {
    reader.abort();
  }

  function errorHandler(evt) {
    switch(evt.target.error.code) {
      case evt.target.error.NOT_FOUND_ERR:
        alert('File Not Found!');
        break;
      case evt.target.error.NOT_READABLE_ERR:
        alert('File is not readable');
        break;
      case evt.target.error.ABORT_ERR:
        break; // noop
      default:
        alert('An error occurred reading this file.');
    };
  }

  function updateProgress(evt) {
    // evt is an ProgressEvent.
    if (evt.lengthComputable) {
      var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
      // Increase the progress bar length.
      if (percentLoaded < 100) {
        progress.style.width = percentLoaded + '%';
        progress.textContent = percentLoaded + '%';
      }
    }
  }

  function handleFileSelect(evt) {
    // Reset progress indicator on new file selection.
    progress.style.width = '0%';
    progress.textContent = '0%';

    reader = new FileReader();
    reader.onerror = errorHandler;
    reader.onprogress = updateProgress;
    reader.onabort = function(e) {
      alert('File read cancelled');
    };
    reader.onloadstart = function(e) {
      document.getElementById('progress_bar').className = 'loading';
    };
    reader.onload = function(e) {
      // Ensure that the progress bar displays 100% at the end.
      progress.style.width = '100%';
      progress.textContent = '100%';
      setTimeout("document.getElementById('progress_bar').className='';", 2000);
    }

    // Read in the image file as a binary string.
    reader.readAsBinaryString(evt.target.files[0]);
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

例: 読み取りの進行状況を監視する例です。ぜひお試しください。

ヒント: この進行状況インジケータを実際に表示するには、サイズの大きいファイルかリモートドライブ上のリソースを試してみてください。

参考資料

File API 仕様
FileReader インターフェースの仕様
Blob インターフェースの仕様
FileError インターフェースの仕様
ProgressEvent の仕様

HTML5 Rocks

JavaScript で File API を使用してファイルを読み取る