图片预览在动态添加/删除文件上传字段中不起作用

Question

我创建了“动态添加/删除”字段...除其他字段外，还有一个“图像文件”字段...除图像预览外，其他所有东西都运行良好。

第一个字段的预览效果很好，但是在其他添加的字段中，预览效果不佳...

我没弄错，我错在哪里...请帮助我...谢谢...

以下是我的代码：

<div class="card">
  <div class="card-header text-center">
    <b>Team Members</b>
  </div>
  <div class="card-body">

  <div class="row">

    <div class="col-4">

<img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0">

<br><br>

<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>

    </div>

    <div class="col-8">

  <div class="form-group">
    <label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_name[]">
  </div>
  <div class="form-group">
    <label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_email[]">
  </div>
  <div class="form-group">
    <label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_role[]">
  </div>
  <div class="form-group">
    <label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_fb[]">
  </div>

    </div>

  </div>

    <div id="team-member-fields">

    </div>

<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>

  </div>
</div>


<script type="text/javascript">

var i = 0;

function preview_member(event, inp) {
  var reader = new FileReader();
  console.log(inp);
  reader.onload = function() {
    var output = document.getElementById("output_member" + 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="member-fields"><div class="row"><div class="col-4"><img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields">Remove Member</button></div>';

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

</script>

Answer 1

您的rows变量有点混有字符串文字和单引号。

如果要输出$ {variablename}之类的字符串，则必须在该字符串周围加上反引号。 （请参阅Template literals）

检查以下代码段（仅用反引号将行字符串包围）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-header text-center">
    <b>Team Members</b>
  </div>
  <div class="card-body">

  <div class="row">

    <div class="col-4">

<img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0">

<br><br>

<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>

    </div>

    <div class="col-8">

  <div class="form-group">
    <label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_name[]">
  </div>
  <div class="form-group">
    <label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_email[]">
  </div>
  <div class="form-group">
    <label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_role[]">
  </div>
  <div class="form-group">
    <label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_fb[]">
  </div>

    </div>

  </div>

    <div id="team-member-fields">

    </div>

<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>

  </div>
</div>


<script type="text/javascript">

var i = 0;

function preview_member(event, inp) {
  var reader = new FileReader();
  console.log(inp);
  reader.onload = function() {
    var output = document.getElementById("output_member" + 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="member-fields"><div class="row"><div class="col-4"><img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields">Remove Member</button></div>`;

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

</script>