質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.96%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,515

xjaPANDA

score 118

追加ボタンを押すと動的に、画像選択フォームを追加していき、画像のプレビューを表示するフォームを作っています。ただ、フォームを新しく動的に追加していくと、当然画像も追加されてプレビューされるのですが、過去の画像の部分も新しく追加した画像に置き換わってしまいます。原因を調べたところ、追加ボタンをクリックするたびに、+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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>TEST</title>
    <style type="text/css">
        img {
            margin: 0 5px 5px 0;
            max-width: 160px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var num = 1;

        function fileChange(n) {
            var reader = new FileReader(); // 移動
            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>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/30 22:23

    ありがとうございます。おかげで解決しました。とてもはまってしまって違う路線にいっていたので、助かりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.96%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる