動的に追加していく画像選択フォームのプレビュー表示

追加ボタンを押すと動的に、画像選択フォームを追加していき、画像のプレビューを表示するフォームを作っています。ただ、フォームを新しく動的に追加していくと、当然画像も追加されてプレビューされるのですが、過去の画像の部分も新しく追加した画像に置き換わってしまいます。原因を調べたところ、追加ボタンをクリックするたびに、+1 インクリメントされていることから、それらを引数としてセットしている関数に影響がでてしまうようでした。試行錯誤しているのですが、よい解決が思い浮かばないので質問することにしました。よろしくお願いします。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>


<style>
img{
    margin:0 5px 5px 0;
    max-width:160px;
    vertical-align:bottom;
}
</style>


<script type="text/javascript">

$(function() {

   var num = 1;
      var reader = new FileReader();


  function fileChange(n) {

  document.getElementById('file_' + n).onchange = function(e){
    reader.addEventListener('load', function(e) {
       $('#view_' + n ).html('<img src="' + e.target.result + '" />');
    });
   reader.readAsDataURL( this.files[0] );
  }
  }

fileChange(num);


  $('button#add').click(function(){

    num = num + 1;

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

  var row_cnt = $("table tbody").children().length;
  $(':hidden[name="row_length"]').val(parseInt(row_cnt) + 1);
  $(tr_row).appendTo($('table > tbody'));

    fileChange(num);

});


});
</script> 


<form action="data.php" method="post" enctype="multipart/form-data"> 
<table>
  <thead>
    <tr>
      <th>画像</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div id="view_1"></div><input type="file" id="file_1" name="img[]" accept="image/*" /></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td ><button id="add" type="button">追加</button></td>
    </tr>
  </tfoot>
</table>
<input type="hidden" name="row_length" value="1">
<input type="submit" name="send" value="送信">
</form>


</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、以下のようにしてみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>TEST</title>
6    <style type="text/css">
7        img {
8            margin: 0 5px 5px 0;
9            max-width: 160px;
10            vertical-align: bottom;
11        }
12    </style>
13</head>
14<body>
15<form action="data.php" method="post" enctype="multipart/form-data">
16    <table>
17        <thead>
18        <tr>
19            <th>画像</th>
20        </tr>
21        </thead>
22        <tbody>
23        <tr>
24            <td>
25                <div id="view_1"></div>
26                <input type="file" id="file_1" name="img[]" accept="image/*">
27            </td>
28        </tr>
29        </tbody>
30        <tfoot>
31        <tr>
32            <td>
33                <button id="add" type="button">追加</button>
34            </td>
35        </tr>
36        </tfoot>
37    </table>
38    <input type="hidden" name="row_length" value="1">
39    <input type="submit" name="send" value="送信">
40</form>
41<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
42<script type="text/javascript">
43    $(function () {
44        var num = 1;
45
46        function fileChange(n) {
47            var reader = new FileReader(); // 移動
48            document.getElementById('file_' + n).onchange = function (e) {
49                reader.addEventListener('load', function (e) {
50                    $('#view_' + n).html('<img src="' + e.target.result + '" />');
51                });
52                reader.readAsDataURL(this.files[0]);
53            }
54        }
55
56        fileChange(num);
57
58        $('button#add').click(function () {
59            num = num + 1;
60            var tr_row = '' +
61                '<tr>' +
62                '<td><div  id="view_' + num + '"></div><input type="file" id="file_' + num + '" name="img[]" accept="image/*" /></td>' +
63                '</tr>';
64            var row_cnt = $("table tbody").children().length;
65            $(':hidden[name="row_length"]').val(parseInt(row_cnt) + 1);
66            $(tr_row).appendTo($('table > tbody'));
67            fileChange(num);
68        });
69    });
70</script>
71</body>
72</html>