鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

webで画像読み込みで一番簡単なセット(inputタグのデザイン、プレビュー表示のjQuery、type制限)備忘メモ

HTML/CSSはまあまあ、jQueryはまだ初心者を抜けきっていないくらいのレベルです。
Webサービスで、画像を読み込む必要が出たので色々調べました。
結果実装できました!
一口に「画像読み込み」といっても、いくつかの機能に別れるため、それぞれで調べて、私でもわかった初心者にオススメの書き方を備忘も兼ねて共有したいと思います。

画像読み込みはいくつかにわかれる

作る前は「画像読み込み」を一気に作るぞ! と息巻いていたのですが、実際作るとなると、デザインやらjQueryやらいくつかの機能に分かれていました。

  1. 画像を読み込む 部品(=inputタグ)のデザイン
  2. 画像の読み込み&プレビューするjQuery
  3. (おまけ)読み込めるファイルのタイプ制限

画像を読み込む部品のデザイン

これは、いろいろ見た結果、これが一番簡単でわかりやすくシンプルにかけたので採用しました。

[HTML5] <input type="file">のデザインをもっと簡単に変更 - Qiita

要するに、inputタグはdisplay:noneで見えなくしておいて、それに紐付けたラベルの方に好きなデザインをつければいいということですね!


画像読み込み&プレビューするjQuery

これが最も重要ですが、これもいろいろ見た結果、以下の方が一番わかりやすく書いてくれてました。
input type="file"で選択した画像をプレビュー表示 - Qiita

要するに、jQueryのFile APIで読み込んで、それをプレビューするときはFileReader APIを使うということですね。
FileReaderのresultプロパティや、readAsDataURLメソッドについては、MDNのレファレンスをみると理解が進みます。

FileReader - Web API インターフェイス | MDN


(おまけ)読み込めるファイルのタイプ制限

上まで作った後に、パワーポイントファイルとかまで読み込めてしまうことに気づきました。
画像だけにしたかったので、調べました。
こちらの方が、網羅的にやり方を書いてくださっていたので参考にしました。

input type=”file”で選択するファイルを画像のみに制限する方法 – 零弐壱蜂

ざっくり制限なら、html5のaccept="image/*"だけでおk。
明確に制限したい場合も、accept="image/png, image/jpg"などとかけばよし。
typeが何なのかを取得してがっつり確認したい場合は、javascriptを書きましょう、という段階的な説明になっています。


というわけで、上の皆さんのおかげでシンプルなコードがかけました!

以上。