開発者ブログ

File API

Last modified by simdy on 2014/07/07, 12:52

File APIはファイルの読み書きができるAPIですが、読み込みは input type="file" にて指定されたファイルを読み込む機能で、書き込みはWebブラウザのダウンロードにデータを渡す(またはObjectURLを生成)機能となっています。任意のファイルにアクセスしたり、書き込みができる訳ではありません。

利用できるかの判別

ファイル読み込みができるかどうかは以下のコードで判別ができます。

window.File && window.FileReader

これがtrueであれば利用できます。

ファイルの読み込み

例えばHTMLが以下のように指定されていたとします。

<input id="files" type="file" multiple />

multiple 指定をしているので複数ファイルを選択できます。

さらにここでファイルを指定した場合のイベントハンドラを登録します。

window.onload = function(){
 document.querySelector("#file").addEventListener('change', file_changeHandler);
}

こうするとファイルを指定した時点で file_changeHandler が呼ばれるようになります。

function file_changeHandler(e) {
 var file = evt.target.files[0];
 var reader = new FileReader();
  reader.onload = function(event) {
    console.log(event.target.result);
  }
  reader.readAsText(file);
}

FileReaderのオブジェクトに readAsText としてファイル(テキスト)を渡しています。そのreaderのonloadを通じてファイルの内容が読み込まれる仕組みです。非同期で読み込み処理が行われるので注意してください。

readAsTextはテキストファイルの読み込みに使います。その他にも次のようなメソッドがあります。

readAsBinaryString(File)

バイナリファイルを読み込みます。

readAsDataURL

ファイルを読み込むのは変わりませんが、Data URIにエンコードされたデータを返します。

readAsArrayBuffer

ArrayBufferオブジェクトとしてデータを返します。

なお、readAsTextはエンコード指定も可能です(デフォルトはUTF-8になります)。ただしエンコードの自動判別はできません。

Data URIを使ったパターン

Data URIを使った場合、画像のsrcなどにそのまま文字列として当てはめられるのがメリットです。

function file_changeHandler(e) {
 var file = evt.target.files[0];
 var reader = new FileReader();
  reader.onload = function(event) {
   var image = new Image();
image.src = event.target.result;
  }
  reader.readAsDataURL(file);
}

readAsBinaryString を使ったパターン

readAsBinaryString を使った場合、 event.target.result はバイナリデータがそのまま入ります。かつ、1バイトが1文字のデータになりますので、charAtなどのString向けのメソッドがそのまま利用できます。

readAsArrayBuffer を使ったパターン

readAsArrayBufferはArrayBufferを返却しますが、ArrayBufferはそのままでは扱いません。Uint8Arrayなどを使って配列に変換します(Uint8Arrayは8ビットで符号無し整数に変換)。

ファイルの書き込み

ファイルの書き込みを行う場合、まずは Blob を生成します。

var blob = new Blob([text]);

text で指定した部分が保存する文字列になります。そして blob をObjectURLに変換します。

window.URL.createObjectURL(blob);
-> "blob:http%3A//example.com/b230d7b2-4cdf-4bdc-bf26-29a396475c52"

そうするとこのような文字列が返ってきます。このURLを開くとtextで指定した文字列が書き込まれたファイルが表示されます。

IEの場合は

window.navigator.msSaveBlob(blob, 'example.txt');

のようにすることでファイルの保存ができるようになっています。

このようにファイル書き込みについてはブラウザの挙動が異なるほか、元々BlobBuilderだったのがBlobになったりと、動向が安定しないようです。


Copyright (C) 2012-2016 NS Solutions Corporation, All Rights Reserved.