javascript - 预览在动态添加/删除文件字段中未正确更新

Question

我创建了以下代码。除图像预览外，整个代码工作正常。第一个字段正确更新图像预览。

但是当我们在后续的动态文件字段中添加图像时，它只会更新第一个字段的预览。

我想用各自选择的图像更新每个文件字段的预览...

以下是我的代码...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel panel-default">
  <div class="panel-heading">
    <center><b>Team Members</b></center>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-4">
        <div class="thumbnail">
          <script type='text/javascript'>
            function preview_member(event) {
              var reader = new FileReader();

              reader.onload = function() {
                var output = document.getElementById('member_image');
                output.src = reader.result;
              }

              reader.readAsDataURL(event.target.files[0]);
            }
          </script>
          <img src="<?php echo esc_url( site_url('/profile-images/blank-image.png') ); ?>" id="member_image" alt="">
        </div>
        <div class="form-group">
          <label class="btn btn-success btn-block btn-file">Add Image<input type="file" name="member_image[]" onchange="preview_member(event)" style="display: none;"></label>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <label for="member_name">Member Name <b style="color:#FF0000;">*</b></label>
          <input type="text" class="form-control" name="member_name[]" placeholder="">
        </div>
        <div class="form-group">
          <label for="member_role">Role in Project <b style="color:#FF0000;">*</b></label>
          <input type="text" class="form-control" name="member_role[]" placeholder="">
        </div>
        <div class="form-group">
          <label for="member_email">Email address <b style="color:#FF0000;">*</b></label>
          <input type="email" class="form-control" name="member_email[]" placeholder="">
        </div>
        <div class="form-group">
          <label for="member_facebook_id">Facebook Username <b style="color:#FF0000;">*</b></label>
          <input type="text" class="form-control" name="member_facebook_id[]" placeholder="">
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-success btn-block" id="add-member-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Member</button>
    <br>
    <div id="member-fields">

    </div>
  </div>
</div>

<script type="text/javascript">
  jQuery(document).ready(function($) {

    //fadeout selected item and remove
    $(document).on('click', '#remove-member-fields', function(event) {
      event.preventDefault();
      $(this).parent().fadeOut(300, function() {
        $(this).empty();
        return false;
      });
    });

    var rows = `<div class="team-member-fields"><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="<?php echo esc_url( site_url(' / profile - images / blank - image.png ') ); ?>" alt=""></div><div class="form-group"><label class="btn btn-success btn-block btn-file">Add Image<input type="file" name="member_image[]" onchange="preview_member(event)" style="display: none;"></label></div></div><div class="col-md-8"><div class="form-group"><label for="member_name">Member Name <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]" placeholder=""></div><div class="form-group"><label for="member_role">Role in Project <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]" placeholder=""></div><div class="form-group"><label for="member_email">Email address <b style="color:#FF0000;">*</b></label><input type="email" class="form-control" name="member_email[]" placeholder=""></div><div class="form-group"><label for="member_facebook_id">Facebook Username <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_facebook_id[]" placeholder=""></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove Member</button><br></div></div></div>`;

    //add input
    $('#add-member-fields').click(function() {
      $(rows).fadeIn("slow").appendTo('#member-fields');
      i++;
      return false;
    });
  });
</script>

请帮我出一个解决方案...谢谢...

Answer 1

您必须为每个图片标签添加特定的 ID。改变这些:

1-将您的row 变量移动到onclick 事件

2-每次添加元素后增加i计数器

//add input
$("#add-member-fields").click(function() {
i++;

var rows = `<div class="team-member-fields"><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="<?php echo esc_url( site_url(' / profile - images / blank - image.png ') ); ?>"
id="member_image${i}" alt=""></div><div class="form-group"><label class="btn btn-success btn-block btn-file">Add Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div></div><div class="col-md-8"><div class="form-group"><label for="member_name">Member Name <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]" placeholder=""></div><div class="form-group"><label for="member_role">Role in Project <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]" placeholder=""></div><div class="form-group"><label for="member_email">Email address <b style="color:#FF0000;">*</b></label><input type="email" class="form-control" name="member_email[]" placeholder=""></div><div class="form-group"><label for="member_facebook_id">Facebook Username <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_facebook_id[]" placeholder=""></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove Member</button><br></div></div></div>`;

$(rows)
  .fadeIn("slow")
  .appendTo("#member-fields");
return false;
});
});

3-更改函数输入参数并为其添加索引号

function preview_member(event, inp) {
  var reader = new FileReader();
  console.log(inp);
  reader.onload = function() {
    var output = document.getElementById("member_image" + inp);
    output.src = reader.result;
  };

  reader.readAsDataURL(event.target.files[0]);
}

最终代码将是这样

var i = 0;

function preview_member(event, inp) {
  var reader = new FileReader();
  console.log(inp);
  reader.onload = function() {
    var output = document.getElementById("member_image" + inp);
    output.src = reader.result;
  };

  reader.readAsDataURL(event.target.files[0]);
}

jQuery(document).ready(function($) {
  //fadeout selected item and remove
  $(document).on("click", "#remove-member-fields", function(event) {
    event.preventDefault();
    $(this)
      .parent()
      .fadeOut(300, function() {
        $(this).empty();
        return false;
      });
  });

  //add input
  $("#add-member-fields").click(function() {
    i++;

    var rows = `<div class="team-member-fields"><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="<?php echo esc_url( site_url(' / profile - images / blank - image.png ') ); ?>"
id="member_image${i}" alt=""></div><div class="form-group"><label class="btn btn-success btn-block btn-file">Add Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div></div><div class="col-md-8"><div class="form-group"><label for="member_name">Member Name <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]" placeholder=""></div><div class="form-group"><label for="member_role">Role in Project <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]" placeholder=""></div><div class="form-group"><label for="member_email">Email address <b style="color:#FF0000;">*</b></label><input type="email" class="form-control" name="member_email[]" placeholder=""></div><div class="form-group"><label for="member_facebook_id">Facebook Username <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_facebook_id[]" placeholder=""></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove Member</button><br></div></div></div>`;

    $(rows)
      .fadeIn("slow")
      .appendTo("#member-fields");
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<div class="panel panel-default">
  <div class="panel-heading">
    <center><b>Team Members</b></center>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-4">
        <div class="thumbnail">
          <img src="<?php echo esc_url( site_url('/profile-images/blank-image.png') ); ?>" id="member_image0" alt="">
        </div>
        <div class="form-group">
          <label class="btn btn-success btn-block btn-file">Add Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <label for="member_name">Member Name <b style="color:#FF0000;">*</b></label>
          <input type="text" class="form-control" name="member_name[]" placeholder="">
        </div>
        <div class="form-group">
          <label for="member_role">Role in Project <b style="color:#FF0000;">*</b></label>
          <input type="text" class="form-control" name="member_role[]" placeholder="">
        </div>
        <div class="form-group">
          <label for="member_email">Email address <b style="color:#FF0000;">*</b></label>
          <input type="email" class="form-control" name="member_email[]" placeholder="">
        </div>
        <div class="form-group">
          <label for="member_facebook_id">Facebook Username <b style="color:#FF0000;">*</b></label>
          <input type="text" class="form-control" name="member_facebook_id[]" placeholder="">
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-success btn-block" id="add-member-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Member</button>
    <br>
    <div id="member-fields">

    </div>
  </div>
</div>