画像付きフォームをデータベースに保存・編集する

CREATE TABLE sp_img_01 (
  ID      INT AUTO_INCREMENT PRIMARY KEY,  -- 行の番号（自動で増える）
  user_id INT NOT NULL,                    -- 誰のデータか（サンプルでは 1 固定）
  post_id INT NOT NULL,                    -- どの記事のデータか（サンプルでは 1 固定）
  text    VARCHAR(255) NOT NULL DEFAULT '',
  img     VARCHAR(255) NOT NULL DEFAULT '', -- 画像のファイル名（画像なしなら空）
  date    DATETIME DEFAULT CURRENT_TIMESTAMP -- 登録日時（画像の保存フォルダにも使う）
) DEFAULT CHARSET=utf8mb4;

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="hidden" name="MAX_FILE_SIZE" value="1048576">
  <table class="rows">
    <thead>
      <tr><th>テキスト</th><th>画像（1MBまで）</th></tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="text[]" maxlength="100"></td>
        <td>
          <div class="preview"></div>
          <input type="file" name="img[]" accept="image/*">
        </td>
      </tr>
    </tbody>
  </table>
  <p>
    <button type="button" id="add">＋ 行を追加</button>
    <span id="message" class="msg"></span>
  </p>
  <hr>
  <input type="submit" value="送信して保存する">
</form>

<script>
$(function () {
    var MAX_ROWS = 5;  // 一度に送信できる行数

    // 画像を選んだら、送信前にプレビューを表示する
    $(document).on('change', 'input[type=file]', function () {
        var $preview = $(this).siblings('.preview');
        $preview.empty();
        if (!this.files[0]) return;
        var reader = new FileReader();
        reader.onload = function (e) {
            $preview.html('<img src="' + e.target.result + '" alt="">');
        };
        reader.readAsDataURL(this.files[0]);
    });

    // 「行を追加」ボタン
    $('#add').on('click', function () {
        if ($('.rows tbody tr').length >= MAX_ROWS) {
            $('#message').text('※ 一度に追加できるのは' + MAX_ROWS + '行までです。');
            return;
        }
        var row = '<tr>' +
            '<td><input type="text" name="text[]" maxlength="100"></td>' +
            '<td><div class="preview"></div><input type="file" name="img[]" accept="image/*"></td>' +
            '</tr>';
        $('.rows tbody').append(row);
    });
});
</script>

// print_r($_POST);
Array
(
    [MAX_FILE_SIZE] => 1048576
    [text] => Array ( [0] => 夏の空  [1] => 画像なしの行 )
)

// print_r($_FILES);
Array
(
    [img] => Array
        (
            [name]     => Array ( [0] => sky.jpg     [1] => )
            [type]     => Array ( [0] => image/jpeg  [1] => )
            [tmp_name] => Array ( [0] => /tmp/phpA1b2C3  [1] => )
            [error]    => Array ( [0] => 0           [1] => 4 )
            [size]     => Array ( [0] => 183205      [1] => 0 )
        )
)

/**
 * 送信された画像 1 枚をチェックする
 * 問題がなければ null、問題があればエラーメッセージを返す
 */
function check_image(array $files, int $i): ?string
{
    $error = $files['error'][$i] ?? UPLOAD_ERR_NO_FILE;
    $name  = $files['name'][$i] ?? '';

    switch ($error) {
        case UPLOAD_ERR_OK:          // 0: 正常
            break;
        case UPLOAD_ERR_NO_FILE:     // 4: 画像が選ばれていない行（テキストだけの行はOK）
            return null;
        case UPLOAD_ERR_INI_SIZE:    // 1: php.ini の上限を超えた
        case UPLOAD_ERR_FORM_SIZE:   // 2: フォームの MAX_FILE_SIZE を超えた
            return "{$name} のファイルサイズが大きすぎます（1MBまで）。";
        default:
            return "{$name} のアップロードに失敗しました（エラー番号 {$error}）。";
    }

    if ($files['size'][$i] > MAX_SIZE) {
        return "{$name} のファイルサイズが大きすぎます（1MBまで）。";
    }

    // 拡張子ではなく、ファイルの中身から画像の種類を調べる
    $info = @getimagesize($files['tmp_name'][$i]);
    if ($info === false || image_ext($info['mime']) === null) {
        return "{$name} は画像ファイル（GIF・JPEG・PNG）ではありません。";
    }
    return null;
}

$texts = $_POST['text'] ?? [];   // name="text[]" → 配列で届く
$files = $_FILES['img'] ?? [];   // name="img[]"  → 配列で届く

// ---- 1. チェック ---------------------------------------------
if (!is_array($texts) || count($texts) === 0) {
    show_error_page(['送信内容がありません。'], 'index.php');
}
if (count($texts) > MAX_ROWS) {
    show_error_page(['一度に送信できるのは' . MAX_ROWS . '行までです。'], 'index.php');
}
$errors = [];
foreach (array_keys($texts) as $i) {
    $error = check_image($files, $i);
    if ($error !== null) {
        $errors[] = $error;
    }
}
if ($errors) {
    show_error_page($errors, 'index.php');  // 1枚でも問題があれば何も保存しない
}

/**
 * アップロードされた画像を保存し、中サイズとサムネイルも作る
 * @return string 保存したファイル名（ランダムな40文字＋拡張子）
 */
function save_image(string $tmp, string $now): string
{
    $info = getimagesize($tmp);
    $name = sha1(random_bytes(16)) . image_ext($info['mime']);  // 他と重ならない名前
    $dir  = date_dir($now);

    // 日付ごとのフォルダを作る（例: img_full/2026/10/27）
    foreach (['img_full', 'img_med', 'img_thu'] as $d) {
        if (!is_dir(__DIR__ . "/{$d}/{$dir}")) {
            mkdir(__DIR__ . "/{$d}/{$dir}", 0755, true);
        }
    }

    $full = __DIR__ . "/img_full/{$dir}/f{$name}";
    if (!move_uploaded_file($tmp, $full)) {
        throw new RuntimeException('画像を保存できませんでした。');
    }
    resize_image($full, $info, MIDDLE_WIDTH,    __DIR__ . "/img_med/{$dir}/m{$name}");
    resize_image($full, $info, THUMBNAIL_WIDTH, __DIR__ . "/img_thu/{$dir}/t{$name}");
    return $name;
}

/** 画像を指定の横幅に縮小して保存する（GD を使用） */
function resize_image(string $src, array $info, int $width, string $dest): void
{
    [$w, $h] = $info;  // 元の幅と高さ
    if ($w <= $width) {
        copy($src, $dest);  // もともと小さい画像はそのままコピー
        return;
    }
    $height = (int)round($h * $width / $w);  // 縦横の比率を保った高さ

    $srcImage = match ($info['mime']) {
        'image/gif'  => imagecreatefromgif($src),
        'image/jpeg' => imagecreatefromjpeg($src),
        'image/png'  => imagecreatefrompng($src),
    };
    $newImage = imagecreatetruecolor($width, $height);  // 空の画像を作る
    imagealphablending($newImage, false);               // PNG の透明部分を保つ
    imagesavealpha($newImage, true);
    imagecopyresampled($newImage, $srcImage, 0, 0, 0, 0, $width, $height, $w, $h);

    match ($info['mime']) {
        'image/gif'  => imagegif($newImage, $dest),
        'image/jpeg' => imagejpeg($newImage, $dest, 85),
        'image/png'  => imagepng($newImage, $dest),
    };
}

// ---- 2・3. 保存と登録 ----------------------------------------
$dbh = db_connect();
$now = date('Y-m-d H:i:s');   // 画像フォルダの日付と、データベースの日付を同じにする

try {
    $sql  = 'INSERT INTO ' . TABLE . ' (user_id, post_id, text, img, date)
             VALUES (:user_id, :post_id, :text, :img, :date)';
    $stmt = $dbh->prepare($sql);

    foreach ($texts as $i => $text) {
        $text = mb_substr(trim((string)$text), 0, 100);
        $img  = '';
        if (($files['error'][$i] ?? UPLOAD_ERR_NO_FILE) === UPLOAD_ERR_OK) {
            $img = save_image($files['tmp_name'][$i], $now);
        }
        if ($text === '' && $img === '') {
            continue;  // 何も入力されていない行は登録しない
        }
        $stmt->execute([
            ':user_id' => USER_ID,
            ':post_id' => POST_ID,
            ':text'    => $text,
            ':img'     => $img,
            ':date'    => $now,
        ]);
    }

    // 公開デモなので、古いデータは自動で削除（最新 DEMO_MAX_ROWS 件だけ残す）
    demo_prune_images($dbh, TABLE, __DIR__);

} catch (Throwable $e) {
    show_error_page(['保存中にエラーが発生しました。時間をおいて、もう一度お試しください。'], 'index.php');
}

// ---- 4. 表示画面へ -------------------------------------------
header('Location: view.php');
exit;

<div class="gallery">
<?php foreach ($data as $row): ?>
  <figure>
<?php if ($row['img'] !== ''): ?>
    <a href="<?= h(image_url($row, 'full')) ?>" target="_blank"><img src="<?= h(image_url($row, 'med')) ?>" alt=""></a>
<?php else: ?>
    <div class="noimg">画像なし</div>
<?php endif; ?>
    <figcaption><?= h($row['text']) ?></figcaption>
  </figure>

<?php foreach ($data as $row): ?>
      <tr data-id="<?= h($row['ID']) ?>">
        <td>
          <input type="text" name="text[]" value="<?= h($row['text']) ?>" maxlength="100">
          <input type="hidden" name="ID[]" value="<?= h($row['ID']) ?>">
        </td>
        <td>
          <div class="preview"></div>
<?php if ($row['img'] !== ''): ?>
          <div class="current">
            <a href="<?= h(image_url($row, 'full')) ?>" target="_blank"><img src="<?= h(image_url($row, 'med')) ?>" alt=""></a>
            <button type="button" class="del-img">画像を削除</button>
          </div>
<?php endif; ?>
          <input type="file" name="img[]" accept="image/*"<?= $row['img'] !== '' ? ' style="display:none"' : '' ?>>
        </td>

try {
    foreach ($texts as $i => $text) {
        $text    = mb_substr(trim((string)$text), 0, 100);
        $id      = (int)($ids[$i] ?? 0);
        $hasFile = ($files['error'][$i] ?? UPLOAD_ERR_NO_FILE) === UPLOAD_ERR_OK;

        if ($id > 0) {
            // ===== 既存の行 =====
            $row = find_row($dbh, $id);
            if ($row === null) {
                continue;  // 別の人が先に削除していた
            }
            $stmt = $dbh->prepare('UPDATE ' . TABLE . ' SET text = :text WHERE ID = :id');
            $stmt->execute([':text' => $text, ':id' => $id]);

            if ($hasFile) {
                // 新しい画像を保存し、古い画像ファイルは消す
                $img = save_image($files['tmp_name'][$i], $now);
                delete_image_files($row);
                // 画像の置き場所は日付で決まるので、date も今日の日付に更新する
                $stmt = $dbh->prepare('UPDATE ' . TABLE . ' SET img = :img, date = :date WHERE ID = :id');
                $stmt->execute([':img' => $img, ':date' => $now, ':id' => $id]);
            }
        } else {
            // ===== 新しく追加した行 =====
            $img = $hasFile ? save_image($files['tmp_name'][$i], $now) : '';
            if ($text === '' && $img === '') {
                continue;
            }
            $stmt = $dbh->prepare('INSERT INTO ' . TABLE . ' (user_id, post_id, text, img, date)
                                   VALUES (:user_id, :post_id, :text, :img, :date)');
            $stmt->execute([
                ':user_id' => USER_ID,
                ':post_id' => POST_ID,
                ':text'    => $text,
                ':img'     => $img,
                ':date'    => $now,
            ]);
        }
    }

    // 画像を削除（ajax）。送るのは行の ID だけ
    $(document).on('click', '.del-img', function () {
        var $tr = $(this).closest('tr');
        $.post('del_img.php', { ID: $tr.data('id') }).done(function () {
            $tr.find('.current').remove();              // 表示中の画像を消す
            $tr.find('input[type=file]').show();         // 新しい画像を選べるようにする
        });
    });

    // 行を削除（ajax）
    $(document).on('click', '.del-line', function () {
        var $tr = $(this).closest('tr');
        if (!$tr.data('id')) {          // まだ保存していない行は、画面から消すだけ
            $tr.remove(); added--; return;
        }
        $.post('del_line.php', { ID: $tr.data('id') }).done(function () {
            $tr.remove();
        });
    });

header('Content-Type: application/json; charset=utf-8');

$id = (int)($_POST['ID'] ?? 0);
if ($_SERVER['REQUEST_METHOD'] !== 'POST' || $id <= 0) {
    http_response_code(400);
    echo json_encode(['ok' => false]);
    exit;
}

$dbh = db_connect();
$row = find_row($dbh, $id);
if ($row !== null) {
    delete_image_files($row);  // 画像ファイル（3サイズ）を削除
    $stmt = $dbh->prepare('UPDATE ' . TABLE . " SET img = '' WHERE ID = :id");
    $stmt->execute([':id' => $id]);
}
echo json_encode(['ok' => true]);

// 削除のような「データを変える処理」は POST のときだけ行う
// （GET のリンクだと、検索エンジンのロボットが巡回しただけで消えてしまうため）
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $dbh = db_connect();
    foreach (all_rows($dbh) as $row) {
        delete_image_files($row);
    }
    $stmt = $dbh->prepare('DELETE FROM ' . TABLE . ' WHERE user_id = :user_id AND post_id = :post_id');
    $stmt->execute([':user_id' => USER_ID, ':post_id' => POST_ID]);
}

// 戻り先は決まった2つのどちらかだけ（外部のURLに飛ばされないように）
$back = ($_POST['back'] ?? '') === 'edit' ? 'edit.php' : 'index.php';
header('Location: ' . $back);
exit;