FileAPI

FileAPI

ローカルファイルの利用


HTML5では、ファイル操作に関する File API が定義されました。これによってローカルのファイルをブラウザ上で直接、取り扱うことが可能になりました。

ここで紹介するのは、閲覧者の手元（ローカル）にあるファイルをページ上に反映させるサンプルです。このサンプルでは、Drop JPEG Image Here の部分に手元の画像（JPEG）をドラッグ＆ドロップすると、その画像を表示するとともに、ファイル名・ファイルサイズの情報を表示します。

このサンプルでは、あくまでも、あなたのブラウザ上にドラッグした画像が反映されるだけで、あなたの画像をサーバーにアップするような操作はしていません。

サンプル

• DEMO：https://koichi-inoue.github.io/FileAPI/
• CODE：https://github.com/koichi-inoue/FileAPI/
  
  

スクリプトの概説

• 1) ドラッグ＆ドロップイベントを検知したら GetImage関数を呼ぶようにイベントリスナーに定義しています。

  img.addEventListener("dragover",function(ev){ ev.preventDefault();}, false);
  img.addEventListener("drop", function(ev){ ev.preventDefault(); GetImage(ev);}, false);

• 2) GetImage()関数内では、まず変数 file にファイルを取得します。

  file = ev.dataTransfer.files[0];

• 3) FileReaderオブジェクトを生成して file からデータの読み込みを行います。

  reader = new FileReader();
  reader.readAsDataURL(file);

• 4) ファイルの読み込み操作が完了した後に FileReader.result（ファイルの内容）をイメージオブジェクトの src に適用することで、HTML上の imgタグの内容を動的に変更しています。

  reader.onloadend = function() {
       img.setAttribute("src",reader.result);
        ：