画像関連

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

 
ここまでの記事はこちら
 

今回はデータベースに保存した画像を取得・表示していきます。
 


 

解説

画像を取得する

list.php を開いて、8~11行目を追加します。

 

images テーブルから作成日時(created_at)の新しい順でデータを取得しています。
 
 

画像を表示する

取得した画像データ $images を for ルーブを使って表示していきます。

list.php の5・8・11行目のコードを変更します。

 

8行目

画像の表示は、画像を出力する image.php ファイルを作成して行います。

image.php という名前でファイルを作成して、以下のようにコードを書きます。

 

image.php では

<img src="image.php?id=<?= $images[$i]['image_id']; ?>"

で渡された image_id を受け取って、その image_id から画像データを取得します。
 

12行目で image/jpg, image/png などの Content-type を指定してから画像データを出力します。
 
 

11行目

画像の名前とサイズを表示しています。

画像サイズはバイトで保存されているので、キロバイトに変換して小数点第二位まで表示させています。(1KB = 1,000B)
 
 

Lightboxの画像

最後に Lightbox 部分も修正しましょう。list.php の 3・8・10行目のコードを変更します。

 
 
 

これで画像表示は完成です!

画像が表示されていること、Lightbox も正しく表示されることを確認してください。

 
 

次に行うこと

次回は画像をデータベースから削除できるようにしていきます。

第5回「画像を削除する」に進む
 
 

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

CAPTCHA


17 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
Daiki Matsuda
Daiki Matsuda
10 months ago

コメント失礼致します。
こちらのサイトを参考にプログラムの勉強をしております。

画像を保存し、表示するプログラムにてpdfを保存して同じように表示することは可能でしょうか。

Daiki Matsuda
Daiki Matsuda
9 months ago
Reply to  Sara

ありがとうございます!!
無事にリストの方で確認ができました!!
クリックした際に、拡大表示が出来ないのですが、その場合は諦めた方がよろしいでしょうか。

Daiki Matsuda
Daiki Matsuda
9 months ago
Reply to  Sara

何度もコメント返信頂き、ありがとうございます!!
「404 File Not Found」のページが表示され、データが読み込めなかったのですが、
もしかしたらlightboxはPDFに対応してないのでしょうか。

Last edited 9 months ago by Daiki Matsuda
Daiki Matsuda
Daiki Matsuda
9 months ago
Reply to  Sara
<?php
require_once('functions.php');


$pdo = connectDB();


if ($_SERVER['REQUEST_METHOD'] != 'POST') {
    // 画像を取得
    $sql = 'SELECT * FROM images ORDER BY created_at DESC';
    $stmt = $pdo->prepare($sql);
    $stmt->execute();
    $images = $stmt->fetchAll();


} else {
    // 画像を保存
    if (!empty($_FILES['image']['name'])) {
        $name = $_FILES['image']['name'];
        $type = $_FILES['image']['type'];
        $content = file_get_contents($_FILES['image']['tmp_name']);
        $size = $_FILES['image']['size'];


        $sql = 'INSERT INTO images(image_name, image_type, image_content, image_size, created_at)
                VALUES (:image_name, :image_type, :image_content, :image_size, now())';
        $stmt = $pdo->prepare($sql);
        $stmt->bindValue(':image_name', $name, PDO::PARAM_STR);
        $stmt->bindValue(':image_type', $type, PDO::PARAM_STR);
        $stmt->bindValue(':image_content', $content, PDO::PARAM_STR);
        $stmt->bindValue(':image_size', $size, PDO::PARAM_INT);
        $stmt->execute();
    }
    header('Location:list_1.php');
    exit();
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Image Test</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8 border-right">
            <ul class="list-unstyled">
                <?php for($i = 0; $i < count($images); $i++): ?>
                    <li class="media mt-5">
                      <div style=”position:relative;”>  
                            <iframe src=”image.php?id=<?= $images[$i][‘image_id’]; ?>” width=”300″ height=”200″></iframe>
                        <a href=”#lightbox” data-toggle=”modal” data-slide-to=”<?= $i; ?>” style=”position:absolute; top:0; left:0; display:inline-block; width:300px; height:200px; z-index:10;”>  
                       </a> </div>
                        <div class="media-body">
                            <h5><?= $images[$i]['image_name']; ?> (<?= number_format($images[$i]['image_size']/1000, 2); ?> KB)</h5>
                            <a href="javascript:void(0);" onclick="var ok = confirm('削除しますか?'); if (ok) location.href='delete.php?id=<?= $images[$i]['image_id']; ?>'"><i class="far fa-trash-alt"></i> 削除</a>
                        </div>
                    </li>
                <?php endfor; ?>
            </ul>
        </div>
        <div class="col-md-4 pt-4 pl-4">
            <form method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label>画像を選択</label>
                    <input type="file" name="image" required>
                </div>
                <button type="submit" class="btn btn-primary">保存</button>
            </form>
        </div>
    </div>
</div>


<div class="modal carousel slide" id="lightbox" tabindex="-1" role="dialog" data-ride="carousel">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <ol class="carousel-indicators">
            <?php for ($i = 0; $i < count($images); $i++): ?>
                <li data-target="#lightbox" data-slide-to="<?= $i; ?>" <?php if ($i == 0) echo 'class="active"'; ?>></li>
            <?php endfor; ?>
        </ol>
        <div class="carousel-inner">
            <?php for ($i = 0; $i < count($images); $i++): ?>
                <div class="carousel-item <?php if ($i == 0) echo 'active'; ?>">
                  <iframe src="image.php?id=<?= $images[$i]['image_id']; ?>" class="d-block w-100" width="500" height="300"></iframe>
                </div>
            <?php endfor; ?>
        </div>
        <a class="carousel-control-prev" href="#lightbox" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#lightbox" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

何度もご回答ありがとうございます。
上記のプログラムで添付画像のようになってしまいます。
Microsoft EdgeやGoogle Chromeで試しましたが、同じ結果となってしまいます。
自分で解決出来ずに申し訳ございません。

2021-12-10 (4).png
Daiki Matsuda
Daiki Matsuda
9 months ago
Reply to  Sara

本当にありがとうございます!!
無事に確認することができました!
とんでもなく初歩的なミスにより、
Sara先生には大変ご迷惑をおかけして大変申し訳ありませんでした。

Sara先生の講座を今から受講し、これからもっと勉強して精進したいと思います!
本当にありがとうございました😭

Daiki
Daiki
9 months ago
Reply to  Sara

久しぶりの質問で失礼いたします。

先日はご丁寧な質問対応ありがとうございました。
PDF拡大を行なって気づいたのですが、
画像にカーソルを合わせなくても、lightboxで指定された範囲をクリックすることで拡大表記が出来ることだったのですが、
カーソルを画像にだけ合わせた時に拡大クリックすることは可能ではないなでしょうか。

一般人
一般人
8 months ago

コメント失礼致します!
ライトボックスを勉強している者です!

ライトボックスで画像を拡大後に右上に×ボタンをつけて、拡大画像を閉じる機能をつけたいと考えているのですが、それは実装可能でしょうか。

Earyo
Earyo
8 months ago

複数の画像ファイルを選択してデータベースに保存することは可能でしょうか。

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