「追加」ボタン＋Upload Thumbs で画像の入力欄を増やす | 動かして学ぶ PHP・jQuery 入門サンプル帳

解説コードを読んでみよう

このサンプルでわかること

あとから追加した要素に、プラグインを付け直す方法
id に番号を振って、追加した入力欄を1つずつ区別する方法

これまでの2つのサンプルの組み合わせです。行を増やす仕組みは「テキスト＆画像」、プレビューは「Upload Thumbs」と同じです。

使っているファイル

index.php入力フォームと「追加」の JavaScript
../js/jquery.upload_thumbs.jsUpload Thumbs プラグイン本体
data.php送信された情報を表示する PHP

1. 入力欄に番号付きの id を付ける

index.php（25〜28行目） PHP

    <tr>
      <td><input type="text" name="text[]"></td>
      <td><label><input type="file" id="file_1" name="img[]" accept="image/*"></label></td>
    </tr>

1行目の画像欄には id="file_1" を付けています。2行目以降は file_2、file_3 … と番号を増やしていきます。

2. 行を追加したら、その行にもプラグインを付ける

index.php（40〜62行目） PHP

<script>
$(function() {
  var num = 1;

  // 最初からある1行目の画像欄にプレビュー機能を付ける
  $('#file_1').uploadThumbs({position : 0, imgbreak : true});

  $('button#add').click(function(){
    num = num + 1;

    var tr_row = '' +
    '<tr>' +
      '<td><input type="text" name="text[]"></td>' +
      '<td><label><input type="file" id="file_' + num + '" name="img[]" accept="image/*"></label></td>' +
    '</tr>';

    $(tr_row).appendTo($('.add-form > tbody'));

    // 追加した行の画像欄にもプレビュー機能を付ける
    $('#file_' + num).uploadThumbs({position : 0, imgbreak : true});
  });
});
</script>

45行目：ページを開いた時点で存在する1行目（#file_1）にプラグインを付けます。
48行目：「追加」が押されるたびに num を1増やします。
53行目：新しい行の画像欄の id を 'file_' + num にします（2回目なら file_2）。
59行目：行を追加したあとで、その新しい画像欄（#file_2 など）にプラグインを付けます。

jQuery で $('...').uploadThumbs() を実行したとき、プラグインが付くのはその時点で画面にある要素だけです。あとから追加した入力欄には何も付いていないので、追加するたびにプラグインを実行し直す必要があります。これはプレビューを自作したサンプルで fileChange(num) を呼び直していたのと同じ考え方です。

3. PHP 側の受け取り

1つの欄で選べる画像は1枚なので、data.php は「テキスト＆画像」と同じく、テキストと画像を同じ番号で組み合わせて表示しています。

data.php（31〜41行目） PHP

<?php foreach ($text as $i => $value):
        $err = (int)($files['error'][$i] ?? UPLOAD_ERR_NO_FILE); ?>
  <tr>
    <td><?= h($i) ?></td>
    <td><?= h($value) ?></td>
    <td><?= h($files['name'][$i] ?? '') ?></td>
    <td><?= h($files['type'][$i] ?? '') ?></td>
    <td><?= h(number_format((int)($files['size'][$i] ?? 0))) ?> バイト</td>
    <td><?= h($upload_errors[$err] ?? 'エラー番号 ' . $err) ?></td>
  </tr>
<?php endforeach; ?>

書き直したポイント

以前のページはプラグインのファイルを読み込んでいなかったため、プレビューが表示されていませんでした。読み込むように直しています。
行の追加先を $('.add-form > tbody') に絞り、ページ内のほかの表に行が増えないようにしました。

このフォームで送った画像を、実際にサーバーへ保存してデータベースに登録するところまで作ったのが、次の「Upload Thumbs 版・データベース保存」のサンプルです。

テキスト	画像