Blog

File Apiを使ってアップロードした画像を表示させる

2015.10.20Cat:javascript jQuery デザイナー

HTML5から登場したFile Apiを利用すると、画像をinput[type=file]でアップロードしたものをすぐサイトに反映させることができます。

そもそもの話になってしまう、かつ、だいぶ前の話ですが、HTML5から新しいAPIが追加されました。

localstorage、Geolocation API、canvas、svg、等々です。
詳しくは、下記リンクをご覧ください。
HTML5のAPI、および、関連仕様

今回ご紹介するFile Apiを使うと、ローカル環境に保存されているファイルを扱えるようになるそうです。

DEMOを作りましたのでご覧下さい。

DEMO

DEMOはちょっとfileのボタンをオリジナルにしているのと、
ドラッグ&ドロップでアップロード出来るようになっております。
これもHTML5からできたAPIになります。

jQueryで実装しています。

上手く構造説明することは出来ませんが、
アップロードボタンを押す → input[type=file]が動作 → 画像をアップ(変更) → 
サイトに、画像の情報を表示。
という流れです。

今まで難しかったことが、html、javasciptで簡単にできるようになって来てますね!
今度は、ドラッグ&ドロップやform周りのことを書いてみたいと思います!

参考ブログ

HTML5のFile APIを使用して、ドラッグ&ドロップでファイルをアップロード | Soraxism

HTML5のFile APIでローカルファイル情報取得してやんよ!!! | ときどきWEB

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ