プレビュー付き画像フォームをデータベースに保存する（Upload Thumbs 版）

    <title><?= h(page_title($title ?? '')) ?></title>

    <!-- 画像プレビューのプラグイン（jQuery の後に読み込む） -->
    <script src="../js/jquery.upload_thumbs.js"></script>

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

    // プレビューはプラグインにおまかせ。1行目の入力欄に設定する
    $('input[type=file]').uploadThumbs({ position: 0, imgbreak: true });

    // 「行を追加」ボタン
    $('#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><input type="file" name="img[]" accept="image/*"></td>' +
            '</tr>';
        var $row = $(row).appendTo('.rows tbody');
        // 追加した行の入力欄にもプラグインを設定する
        $row.find('input[type=file]').uploadThumbs({ position: 0, imgbreak: true });
    });
});

    // 画像のプレビューはプラグインにおまかせ
    $('input[type=file]').uploadThumbs({ position: 0, imgbreak: true });

    // 行を追加。新しい行の ID は空にしておく（update.php で「新規」と判断するため）
    $('#add').on('click', function () {
        if (added >= MAX_NEW) {
            $('#message').text('※ 一度に追加できるのは' + MAX_NEW + '行までです。');
            return;
        }
        added++;
        var row = '<tr>' +
            '<td><input type="text" name="text[]" maxlength="100"><input type="hidden" name="ID[]" value=""></td>' +
            '<td><input type="file" name="img[]" accept="image/*"></td>' +
            '<td><button type="button" class="del-line">行を削除</button></td>' +
            '</tr>';
        var $row = $(row).appendTo('.rows tbody');
        $row.find('input[type=file]').uploadThumbs({ position: 0, imgbreak: true });
    });

// ---- 設定 ----------------------------------------------------
const TABLE           = 'sp_img_02';  // 使うテーブル
const USER_ID         = 1;            // サンプルなので、ユーザーと記事は固定
const POST_ID         = 1;
const MAX_ROWS        = 5;            // 1回に送信できる行数
const MAX_SIZE        = 1048576;      // 画像1枚の上限（1MB）
const MIDDLE_WIDTH    = 200;          // 中サイズ画像の横幅(px)
const THUMBNAIL_WIDTH = 100;          // サムネイルの横幅(px)

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

header('Location: edit.php');  // 続けて編集できるように編集画面へ戻る
exit;

CREATE TABLE sp_img_02 (
  ID      INT AUTO_INCREMENT PRIMARY KEY,
  user_id INT NOT NULL,
  post_id INT NOT NULL,
  text    VARCHAR(255) NOT NULL DEFAULT '',
  img     VARCHAR(255) NOT NULL DEFAULT '',
  date    DATETIME DEFAULT CURRENT_TIMESTAMP
) DEFAULT CHARSET=utf8mb4;