JS/jQueryでFile APIを使って画像などのローカルファイルを読み込む

とあるWebサービスを作るために色んなAPIについて勉強しています。今回はその一つであるFile APIの基本的な使い方について紹介します。

ボタンを設置

まず、HTMLでボタンを設置します。

File APIへの対応

if (window.File){
  console.log('File APIは利用できます');
}
else {
  console.log('File APIは利用できません');
}

ブラウザがFile APIに対応しているかどうか判別できます。

FileListオブジェクト

$('.file_input').change(function(){
  console.log(this.files);
});

これで読み込んだローカルファイルのオブジェクトを取得することができます。

テキストファイルの表示

読み込んだ結果を表示するために .result コンテナを追加しておきます。

var reader = new FileReader();
reader.addEventListener('load', function(){
 $('.result').html(reader.result);
});

$('.file_input').change(function(){
  if (this.files[0].type == 'text/plain'){
    reader.readAsText(this.files[0], 'UTF-8');
  }
});

FileReaderオブジェクトを作成します。reader.result には読み込んだファイルの内容が返されます。 readAsText() メソッドで読み込んだファイルをテキストとして読み込むことができます。第二引数は省略できますが、省略した場合はUTF-8として処理されます。

複数のファイルを読み込むとき

input 要素に multiple を追加すると、複数ファイルの読み込みができるようになります。multiple=”” の =”” は無くてもいいです。むしろ無い方がHTML5的にはいいのかもしれません。複数ファイルを選択するときはShiftキーやCtrlキーを使って選択します。

$('.file_input').change(function(){
  for (var i = 0; i < this.files.length; ++i){
    if (this.files[i].type == 'text/plain'){
      var reader = new FileReader();
      
      reader.onload = function(e){
        $('.result').append(e.target.result);
      }
      reader.readAsText(this.files[i], 'UTF-8');
    }
  }
});

this.file.lengthでファイル数を取得できるので、for文で回します。

画像ファイルの表示

var reader = new FileReader();
reader.addEventListener('load', function(){
  $('.result').html('');
});

$('.file_input').change(function(){
  if (this.files[0].type.match(/image/)){
    reader.readAsDataURL(this.files[0]);
  }
});

画像を読み取る場合は readAsDataURL() メソッドを使います。