SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

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

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

答え

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

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

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

デモ1

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

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

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

デモ2

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

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

関連するメモ

コメント