HTMLで複数の画像を選択してそれをアップロードせずにローカルに表示(JQuery, JavaScript)

こういうのが地味に面倒臭くていつも調べているのでメモっておく.

やりたいことは以下みたいな感じで、画像を複数選択して、その場でブラウザ上で表示

image-multiple-select.png

トピックは3つくらい?

  • inputタグでmultipleを指定するとHTML5なら複数選択可能
  • inputタグのchangeイベントでファイル群のローカルでのハンドラが手に入るのでimgにセットする.
  • アップロードせずにローカルに表示するコード

ってことで早速ミニマムコード

JQuery使ってしまっています.悪しからず

コード

FileReaderでそれぞれ読んだら、ぽんぽんimgタグを追加していきます.

inputタグのfilesにそれぞれのファイルへのパスは保持されています.

あまり難しいところはなかったですね..

でもよく忘れる.

About the author

コメントを残す