スタートページJavascript

File APIのテスト

File API のテスト結果の個人用メモです。
私が理解できたことのメモですので、正確性には疑問がありますが、それなりに動作します。

目次

使用ブラウザのFile API対応確認
FileList:ローカルファイルの属性(ファイル名やサイズなど)の読込み
  ダイアログボックスによる指定
    基本的な方法
    this を用いた記述の簡便化
  ドラッグ&ドロップによる指定
Directory:フォルダも対象にした拡張
FileReader:ローカルファイルの内容の読込み


File APIとは

File APIは、ローカルファイルをアクセスできる機能です。
 一般に、HTMLでアクセスできるファイルは、セキュリティの観点から、Web側にあるファイルに限定されており、ローカルファイル(ブラウザが動作しているパソコン側に存在するファイル)にはアクセスできません。
 しかし、利用者のPCにあるテキストファイルを読み込んで英訳して返すサービスや画像ファイルを加工して返すようなサービスが普及してきました。また、自分のパソコン内にある大量の写真を整理・検索するツールを作りたいとき、写真ファイルの一覧表をJavascriptに取り込みたいようなこともあります。
 File APIは、そのような機能をjavascriptの標準的機能で実現しようとするものです。


準備:全体の説明

使用ブラウザのFile API対応確認

 このページを閲覧しているブラウザが File API に対応しているかどうかチェックします。

function fileApiCheck() {
    var 結果 = "このブラウザのFile API対応状況<br>";
    結果 += "File API:";
      if (window.File)       結果 += "利用可能<br>";  else 結果 += "未対応<br>";
    結果 += "FileList:";
      if (window.FileList)   結果 += "利用可能<br>";  else 結果 += "未対応<br>";
    結果 += "FileReader:";
      if (window.FileReader) 結果 += "利用可能<br>";  else 結果 += "未対応<br>";
    結果 += "Blob:";
      if (window.Blob)       結果 += "利用可能";      else 結果 += "未対応";
    document.getElementById('表示場所0').innerHTML = 結果; 
}

確認結果がここに表示されます。

ブラウザの制約

File API
ローカルファイルをブラウザ上で直接、取り扱うことができる基本機能です。
これが未対応なら、後続の機能も未対応になります。
FileList
ソフトをインストールするとき、保存場所を指定するのに[参照]ボタンによりディレクトリを表示することがあります。それと同じように、ディレクトリ(フォルダ)を開き、それからファイルを指定する機能です。
FileReader
標準的な JavaScriptイベント処理を通じてファイルを非同期に読み取る機能です。読取りの進行状況監視、エラーの検出、読込完了の確認などの機能があります。
Blob
Blobは、ファイルプロパティです。これにはファイルの属性があり、ファイルサイズやタイプを得るときに使います。