【Javascript】File API を使って、アップロード画像のプレビューをする

Tweet

Category JavaScript 2011/11/30

問題

ファイルのアップロードをするフォームを作るんだけど、画像のプレビューがその場でできるといいな。

確認画面で確認とか面倒で。。。

答え

File API を使うと、その場でプレビューができる。

File API のFileインターフェイスでファイルの情報を取得、FileReaderインターフェイスでファイルの読み込みを行い、imgタグのsrcにData URL スキームで渡す。

モダンなWebブラウザに限定されますが、ちょっとした便利機能として提供したり、環境が限定できる管理画面系で使えます。

デモ１

https://www.softel.co.jp/blogs/tech/archives/demo/file-api-20111201

画像限定で指定のファイルをプレビューします。

テキストをテキストエリアに展開するように作ることも可能です。

デモ２

https://www.softel.co.jp/blogs/tech/archives/demo/file-api-20111202

ついでにドラッグアンドドロップも処理するようにしたもの。