LogoMark.png

FileAPI

FileAPI

ローカルファイルの利用


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

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

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

サンプル

スクリプトの概説




PAGES

GUIDE

TOOL

DATA

Last-modified: 2021-05-27 (木) 15:31:08