LogoMark.png

FileAPI のバックアップ差分(No.2)


#author("2021-05-27T15:31:08+09:00;1970-01-01T18:00:00+09:00","default:inoue.ko","inoue.ko")
#author("2021-05-27T18:36:28+09:00;2021-05-27T15:31:08+09:00","default:inoue.ko","inoue.ko")
*FileAPI
ローカルファイルの利用
~
HTML5では、ファイル操作に関する ''File API'' が定義されました。これによってローカルのファイルをブラウザ上で直接、取り扱うことが可能になりました。

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

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

***サンプル
-DEMO:https://koichi-inoue.github.io/FileAPI/
-CODE:https://github.com/koichi-inoue/FileAPI/
~

***HTML
#gistit(koichi-inoue/FileAPI/blob/main/index.html,,400)

~

***CSS
#gistit(koichi-inoue/FileAPI/blob/main/style.css,,400)
~

***JavaScript
#gistit(koichi-inoue/FileAPI/blob/main/script.js,,400)
~

***スクリプトの概説
-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);


~
~