画像関連

【PHP・MySQL】データベースに画像を保存・表示する方法

 


 

はじめに

今回は PHP と MySQL を使って画像ファイルを保存・表示する方法を紹介します。

まずはデモ動画をご覧ください。

 
 

主な機能は

  • 画像をデータベースに保存
  • 画像をデータベースから取得して表示
  • Lightbox で画像を拡大表示
  • 画像の削除

です。

形式・サイズチェック、画像を複数保存する方法を追加しました。(2022年8月)

 
 

PHP と MySQL で画像を保存する方法は

  1. フォルダに画像をアップロードする
  2. データベースに直接保存する

のどちらかが一般的です。

書籍では「①フォルダにアップロードする」方法を扱っていることが多いですが、今回は「②データベースに直接画像を保存する」方法を紹介します。

データベースに直接保存すると、画像の表示にひと手間かかるのが欠点ですが、名前の重複を考慮する必要がなく、削除も簡単になります。
 

データベースには

  • 画像
  • 画像の名前
  • 画像のタイプ(png, jpeg など)
  • 画像のサイズ
  • 画像の登録日

を保存していきます。
 
 

レイアウトには Bootstrap と Font Awesome を使用します。

Bootstrapはフレームワークといい、自分で CSS を書かなくてもボタンやフォーム、スマホ用のレイアウトを簡単に作成することができます。今回は Bootstrap を使って、JavaScript や jQuery のコードを書かずに Lightbox を作る方法も紹介します。
 

画像の削除リンクには Font Awesome という無料のアイコンを使います。1500個もの無料のアイコンを簡単に使うことができるので、ウェブアプリ開発には欠かせません。使ったことがない方は、ぜひ知っておくと便利だと思います

全ての手順を紹介していますので、PHP初心者の方もぜひ作ってみてください!
 
 
 

開発環境

MAMP / PHP version7.2.10
テキストエディタCoda2
ブラウザGoogle Chrome

 
 

メニュー(全8回)

第1回「HTMLの作成」
第2回「データベースの用意」
第3回「画像を保存する」
第4回「画像を表示する」
第5回「画像を削除する」
第6回「形式チェック」
第7回「ファイルサイズのチェック」
補足「複数の画像を保存する」
 
 
 
 

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
guest

CAPTCHA


11 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
たけし
たけし
1 year ago

お世話になります。
PHP・MySQLでつくるカレンダー開発講座を受講させていただいてます。とてもわかりやすく学習でき大変ありがたいです。

並行してPHP と MySQL を使って画像ファイルを保存・表示する方法の内容も
取り組みました。おかげで画像表示と削除が出来ました。

その中で1点質問なのですが もし画像のimage_nameを変更しようとした場合についてです。
My sqlのimage_nameの中で例えば「tigger.jpg」を「タイガー」に変更すれば
ブラウザにタイガーと名前が表示できます。
ただ tigger.jpgの後にある(1930,32KB)といったデータ表示をブラウザでは表示させたくない場合の処理がよくわかりませんでした。
お手数ですがご教授いただけるとありがたいです。よろしくお願いします。

たけし
たけし
1 year ago
Reply to  Sara

Saraさま

お世話になっております。
返信を失念していて遅くなり申し訳ございません。

ご丁寧な回答ありがとうございます。
解決できました!


ひろき
ひろき
9 months ago

コメント失礼致します。
情報工学の勉強を大学で習い始めた者です。

最初に一覧で画像が出てきた際のリスト状態で画像が縦に羅列されているかと思いますが、縦スクロールから横スクロールにして変更することは可能でしょうか。
主なイメージとしては、横長の掲示板みたいにすることです!
また可能であれば、どこを修正したら横並びになりますでしょうか。

Last edited 9 months ago by ひろき
ひろき
ひろき
9 months ago
Reply to  Sara

大変興味深い記事がたくさんあり、このサイトで勉強したいと考えております!購読も考えております!

横スクロール可能になりました!
ありがとうございます!

続けて質問なのですが、保存ボタンなどがある縦線で区切られた右側の領域を修正する箇所はどこになりますでしょうか。

自分なりに考えて、保存ボタンなどを別のphpファイルに作り、list.phpには横スクロールで画像のみにしてみたいと考えております!
これは可能でしょうか。

ひろき
ひろき
9 months ago
Reply to  Sara

お返事ありがとうございます。

保存などのボタンは消せたのですが、保存等などを仕切っていた縦線が消えないのですが、その場合はどのようにしたらよろしいでしょうか。

また別ファイルで保存ファイル作ること可能でした!ありがとうございます!

ひろき
ひろき
9 months ago
Reply to  Sara

先程の質問に加えて質問なのですが、
横スクロールが永遠に続くのですが、これを途中で改行して下段に同じように画像を表示するということは可能でしょうか。

11
0
この記事にコメントするx