HTML5のファイルAPIについて

このページでは、HTML5におけるファイルAPIを紹介します。

ファイルAPIとは

ファイルAPIとは、デスクトップ上のファイルのデータをスクリプトから読み取るためのAPIです。

注意:ファイルAPIを使う場合、HTMLページをWebサーバ上に置かないと動作しません。

ファイルのメタ情報

選択されたファイルを表すFileオブジェクトの情報を取得します。

ファイル名
サイズ
MIMEタイプ
最終更新日時

HTMLソースです。

Javascriptはこうなります。

デスクトップファイルのドロップ

デスクトップのファイルをドロップするサンプルです。
下のテキストエリアに画像ファイルをドロップしてください。
このサンプルでは、画像ファイルしかドロップできません。

HTMLソースです。

Javascriptはこうなります。

ファイル読み取りのイベントハンドラには、次のようなものがあります。

  • loadstart … ファイルの読み取り開始時
  • progress … ファイルの読み取り最中
  • abort … ファイル読み取り中止時。abort関数の呼び出し時など
  • error … ファイル読み取り時のエラー
  • load … ファイル読み取りが正常終了したとき
  • loadend … ファイルの読み取り処理が終了したとき。読み取りの成功・失敗に関わらず発生する

ファイルのロード進捗

ファイル読み込みのProgressバーのようなことができます。
そのために、HTML5で追加されたprogress要素を使用します。

0 / 0 バイト
(0%)

HTMLソースです。

Javascriptはこうなります。

広告
  • LINEで送る