追加ボタンを押すと動的に、画像選択フォームを追加していき、画像のプレビューを表示するフォームを作っています。ただ、フォームを新しく動的に追加していくと、当然画像も追加されてプレビューされるのですが、過去の画像の部分も新しく追加した画像に置き換わってしまいます。原因を調べたところ、追加ボタンをクリックするたびに、+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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/30 13:23