DBに保存されている画像を取得→表示する方法 掲示板アプリ

Question

前提・実現したいこと

PHPで画像とテキストを一枚のカードにして投稿し、表示する掲示板を作成しています。
テキストの保存-->表示はできているのですが、問題はデータベースに保存されている画像を表示する正しい方法がわからなくて困っています。
画像とテキストを投稿・表示された時には、以下のようなエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Undefined index: image in createset.php on line 4
Undefined index: image in mypage.php on (画像を表示する箇所の.. <img src="<?php print(htmlspecialchars($post['image'], ENT_QUOTES)); ?>" class="card-img-top">)

該当のソースコード

createset.php

<?php
if (!empty($_POST)) {
  if ($_POST['image'] !== '' && $_POST['title'] !== '' && $_POST['description'] !== '') {
    $image = date('YmdHis') . $_FILES['image']['name'];
    $_POST['image'] = $image;

    // パーツセットの情報をデータベースに保存
    $card = $db->prepare('INSERT INTO posts SET card_image=?, title=?, description=?, user_id=?, created_at=NOW()');
    $card->execute(array(
      $_POST['image'],
      $_POST['title'],
      $_POST['description'],
      $user['id']
    ));

    header('Location: mypage.php');
    exit();
  }
}

?>

posts.php

<?php
// ユーザーidと投稿ユーザーidを照合し、全パーツセットを$limit件ずつ取得
$posts = $db->prepare("SELECT u.name, u.sns_name, u.picture, p.* FROM users u, posts p WHERE u.id=p.user_id ORDER BY p.created_at DESC LIMIT {$start}, {$limit}");

// postsテーブルからデータを$limit件取得
$posts->execute();
$posts = $posts->fetchAll(PDO::FETCH_ASSOC);

?>

mypage.php

<?php
ini_set('display_errors', 1);
session_start();
require('dbconnect.php');

include('createset.php');

include('paging.php');
include('posts.php');

?>


    <center>
      <a href="#" class="btn btn-danger col-12 mb-4 mx-auto" data-toggle="modal" data-target="#myModal">パーツセットを作成する</a>
    </center>

    <!-- My-Card-Items -->
    <div class="row">
      <?php foreach ($posts as $post): ?>
        <?php if ($_SESSION['id'] == $post['user_id']): ?>
          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
            <div class="card">
              <a href="#">
                <div class="row no-gutters card-area">
                  <img src="<?php print(htmlspecialchars($post['image'], ENT_QUOTES)); ?>" class="card-img-top">
                </div>
              </a>
              <div class="title-area">
                <a href="view.php?card_id=<?php print(htmlspecialchars($post['card_id'])); ?>" class="title"><?php print(htmlspecialchars($post['title'], ENT_QUOTES)); ?></a>
              </div>
              <div class="profile-area">
                <div class="profile-thum">
                  <a href="#">
                    <img src="user_picture/<?php print(htmlspecialchars($post['picture'], ENT_QUOTES)); ?>" class="rounded-circle" alt="画像">
                  </a>
                </div>
                <div class="profile-username">
                  <a href="#" class="profile-username"><?php print(htmlspecialchars($post['name'], ENT_QUOTES)); ?></a>
                </div>
                <div class="sns-username">
                  <p class="sns-username"><?php print(htmlspecialchars($post['sns_name'], ENT_QUOTES)); ?></p>
                </div>
              </div>
              <div class="description-area"><?php print(htmlspecialchars($post['description'], ENT_QUOTES)); ?></div>
            </div>
          </div>
        <?php endif; ?>
      <?php endforeach; ?>

    </div>
    <!-- ./row -->

  </div>
  <!-- ./container -->

  <!-- セット作成のモーダル設定 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">パーツセットを作成する</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <form action="" method="post" multipart="enctype/multipart">
          <div class="modal-body">
            <input type="hidden">
            <p>
              <label for="id_file">セットの写真；</label>
              <input type="file" name="image" value="test" id="id_file" required>
            </p>
            <p>
              <label for="id_title">Title:</label>
              <input type="text" name="title" class="form-control" placeholder="セットのタイトル" autofocus="autofocus" maxlength="50" id="id_title" required>
            </p>
            <p>
              <label for="id_description">説明文:</label>
              <textarea class="form-control" name="description" placeholder="このセットについての説明(280文字以内)" autofocus="autofocus" maxlength="280" id="id_description" required></textarea>
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
            <button type="submit" class="btn btn-danger" name="create_folder">作成</button>
          </div>
          <!-- ./modal-footer -->
        </form>
      </div>
      <!-- ./modal-content -->
    </div>
    <!-- ./modal-dialog -->
  </div>
  <!-- ./modal -->

試したこと

$_FILESを利用し、画像を'日付 . 画像ファイル名'で保存後、prepareで処理。 (in createset.php)

$posts = $db->prepare("SELECT u.name, u.sns_name, u.picture, p.* FROM users u, posts p WHERE u.id=p.user_id ORDER BY p.created_at DESC LIMIT {$start}, {$limit}"); 

で、取得。 (in posts.php)

<?php foreach ($posts as $post): ?>

で、投稿、表示しています。 (in mypage.php)

<img src="<?php ?>">この形に沿って、もしくはそれ以外の方法でもいいので画像を出力する正しい方法について、回答をお願いします。

---

やはり、アクセス権を775, 777に変えて試しみましたが画像のアップロードができません。
画像アップロードができない原因となっているコードを教えていただきたいです。

$_POST['image'] = $image を $_POST['card_image'] = $image に変えました。

if (!empty($_POST)) {
  if ($_POST['image'] !== '' && $_POST['title'] !== '' && $_POST['description'] !== '') {
    $image = date('YmdHis') . $_FILES['image']['name'];
    move_uploaded_file($_FILES['image']['tmp_name'], __DIR__ . 'card_image/' . $image);
    $_POST['card_image'] = $image;

    // パーツセットの情報をデータベースに保存
    $card = $db->prepare('INSERT INTO posts SET card_image=?, title=?, description=?, user_id=?, created_at=NOW()');
    $card->execute(array(
      $_POST['card_image'],
      $_POST['title'],
      $_POST['description'],
      $user['id']
    ));

    header('Location: mypage.php');
    exit();
  }
}

?>

createset.phpの先頭でこのコードを打つと、

<?php
$uploaddir = __DIR__ . '/card_image' . '/';
$uploadfile = $uploaddir . basename(date('YmdHis') . $_FILES['image']['name']);
var_dump(move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile));

↓
Undefined index: image in /Applications/MAMP/htdocs/Vinyl_App/createset.php on line 3
Undefined index: image in /Applications/MAMP/htdocs/Vinyl_App/createset.php on line 4
と、出力されました。

---

最終的にこのコードになりました。

<?php
if (!empty($_POST)) {
  if ($_FILES['image'] !== '' && $_POST['title'] !== '' && $_POST['description'] !== '') {
    $image = date('YmdHis') . $_FILES['image']['name'];
    move_uploaded_file($_FILES['image']['tmp_name'], __DIR__ . '/card_image' . '/' . $image);
    $card_image = $image;

    // パーツセットの情報をデータベースに保存
    $card = $db->prepare('INSERT INTO posts SET card_image=?, title=?, description=?, user_id=?, created_at=NOW()');
    $card->execute(array(
      $card_image,
      $_POST['title'],
      $_POST['description'],
      $user['id']
    ));

    header('Location: mypage.php');
    exit();
  }
}

?>

Comments

[退会済みユーザー]

ドキュメントルートのサーバー内での絶対パスと、その掲示板phpらを置くパスの情報などもあれば、仮の例示もしやすいのですが。

[Katsuma-F]

回答を頂き、ありがとうございます。
すみません、ファイルのパス情報ということで合っていますか？
Vinyl_App/
　　∟card_image/ ←ついさっきmove_uploaded_file用に作りました。
　　∟createset.php
　　∟posts.php
　　∟mypage.php

Answer 1

PHP: $_FILES - Manual
$_FILESに格納されているアップロードファイルデータは、
一時的なところにファイルが生成されている仮のもので、
受信したphpの処理が終わると消えてしまいます。

消えないよう、
PHP: move_uploaded_file - Manual
を使って分かる場所にファイルを移動して管理する必要があります。

$_FILESにどういうデータが記録されているかは
PHP: POST メソッドによるアップロード - Manual
に例示されているので読むべきです。
具体的なやり方も、そのページの
「例2 ファイルのアップロードを検証する」のサンプルコードが参考になるはずです。

move_uploaded_file($_FILES['image']['tmp_name'], __DIR__ . '/card_image/' . date('YmdHis') . $_FILES['image']['name']);

などとするなど。
それと、アップロード元のファイル名（$_FILES['image']['name']）をそのまま信用しないで、
別途ファイル名をphp側で自動生成することをお勧めします。
（アップロードデータを細工して、サーバーで使えない文字コードを詰めることも可能なため。）

アップロード時の処理：
・一時的ファイルを、webブラウザからアクセス可能な場所にコピーする（move_uploaded_file）
・コピー後のパス情報を、データベースに記録しておく。

表示の処理：
・データベースに保存してあるファイルのパスを、img要素に組み込んで出力。

--

すみません、サンプルコードを間違ってました。
PHP: 自動的に定義される定数 - Manual

__DIR__には、ディレクトリを示す最後の区切り記号がつかないそうなので、
そこを直せばうまくいくと思います。

--

質問文、末尾の、
createset.phpの先頭でこのコードを打つと、
～～
と出力されました、は、
ファイルアップロードを伴わない状態で$_FILESにアクセスしていないでしょうか。
POST送信（form要素でmethod="POST"）しつつ、
input要素でname="image" type="file"にしていて送信できていれば、
$_FILES['image']がカラになることはないと思うのですが。
if (isset($_FILES['image']))などの判定は必要かと思います。

Comments

[Katsuma-F]

createset.phpはこのようにしてみたんですが、./card_imageに保存できません。webブラウザからアクセス可能な場所にコピーするというのは、＄_SESSION['join] = $_POST　のようなことをするという事でしょうか？もう少し詳細な情報を教えて頂けると幸いです。

if (!empty($_POST)) {
if ($_POST['image'] !== '' && $_POST['title'] !== '' && $_POST['description'] !== '') {
$image = date('YmdHis') . $_FILES['image']['name'];
move_uploaded_file($_FILES['image']['tmp_name'], __DIR__ . 'card_image/' . $image);
$_POST['image'] = $image;

// パーツセットの情報をデータベースに保存
$card = $db->prepare('INSERT INTO posts SET card_image=?, title=?, description=?, user_id=?, created_at=NOW()');
$card->execute(array(
$_POST['image'],
$_POST['title'],
$_POST['description'],
$user['id']
));

header('Location: mypage.php');
exit();
}
}

[退会済みユーザー]

> webブラウザからアクセス可能な場所にコピーするというのは、＄_SESSION['join] = $_POST　のようなことをするという事でしょうか？
まったくずれています。
webブラウザからアクセス可能な場所というのは、webブラウザから http://example.com/foo/bar/baz.jpg のようにアクセスできる場所、DocumentRoot の下の公開ディレクトリ上に置くことを意味します。
> ./card_imageに保存できません
webサーバープロセスがそのディレクトリにアクセスできるよう、アクセス権を緩和してください。
おそらく705や755であれば775あるいは777も試さないといけないかもしれません。

[Katsuma-F]

ご返信ありがとうございます。
webブラウザからアクセス可能な場所にコピーすることについて、ご指摘ありがとうございます。理解できました。
card_imageのアクセス権が元々は755であったため、705, 775, 777に変えてファイルのアップロードを試してみたんですが、どのパターンも質問の最初に書いたUndefined index: image in /Applications/MAMP/htdocs/Vinyl_App/createset.php on line 4のエラーコードが出力され、./card_imageに保存できません。
DBのcard_imageカラムを見ると日時の情報だけが入っていました。これはcreateset.phpのプログラムを直せばいいという事なのか、それとも他のファイルのコードが間違っているのでしょうか？

[退会済みユーザー]

__DIR__ の説明、再確認したところ、ディレクトリを示す「/」が最後につかないそうなので、PHPコード上で補う必要があります。

[Katsuma-F]

move_uploaded_file($_FILES['image']['tmp_name'], __DIR__ . '/card_image' . '/' . $image);
このコードに変えてアクセス権を一通り変えてみたんですが、./card_imageに画像をアップロードできません。このコードは合っていますか？
createset.phpの先頭で、
$uploadfile = __DIR__ . '/card_image' . '/';
print_r($uploadfile);
↓
/Applications/MAMP/htdocs/Vinyl_App/card_image/　と出力されました。

[退会済みユーザー]

コピー先は、ディレクトリ名のみではなく、ファイル名もつけたほうがよいかと。

[Katsuma-F]

すみません、ファイル名とういうのはdate('YmdHis') . $_FILES['image']['name']のことで合っていますか？
$image = date('YmdHis') . $_FILES['image']['name'];としています。

[退会済みユーザー]

コピー先のディレクトリ名とファイル名を連結したものの内容をvar_dump()とかしてファイルとして存在可能かどうかをチェックするのがひとつ。
$_POST['image'] = $image;をやめるのもひとつ。$_FILES['image']と重複させて使うのは良くないし、外部から来る変数を上書きすると混乱の元。別途ローカル変数を充てがうこと。

[Katsuma-F]

質問を編集しました。
前と変わらず、画像は./card_imageに保存されず、DBには日時だけ保存されています。
記事を投稿するmypage.phpにおかしい部分がある可能性はありますか？

[退会済みユーザー]

$_FILES['image'] と $_POST['image'] の混在は解消できましたでしょうか。
それと、$_POSTへのコード内の書き込みは避けて、ローカル変数を使ったほうが良いです。$_POST['card_image']ではなく$card_imageなどとするとか。

[Katsuma-F]

mypage.phpのこのコードを間違えていました。
<form action="" method="post" multipart="enctype/multipart">
↓
<form action="" method="post" enctype="multipart/form-data">
そして、$_FILES['image'] と $_POST['image'] の混在を解消し、$_POST['card_image']ではなく$card_imageに変更しました。
初歩的なミスをしていました、すみません。色々なアドバイスを頂きありがとうございました。
おかげさまで画像の取得、保存、表示ができるようになりました！
本当にありがとうございました！

[退会済みユーザー]

そこでしたか、まさかの。よかったです。

Answer 2

• イメージローダ的なapiを用意し、idを指定して画像を呼ぶか
• data:images/jpeg;base64など文字列化して埋め込む

のどちらかが有効です、私なら前者を選びます

Comments

[Katsuma-F]

今回は画像をフォルダに保存、表示する方法にいたしました。
次はイメージローダーファイルを作り、idを指定して画像を呼ぶ方法にしようと思いました。
ご助言をいただき誠にありがとうございました！