javascript - 图像未显示在动态生成的内容上

Question

我正在努力通过动态生成输入字段和图像元素一次上传多张图像。但是，我的代码不会在动态生成的图像元素上显示图像。

<button type="button" class="btn btn-sm btn-info add-image"><i class="ti-image"></i>  Add image</button>
<br><br>
<div class="images"></div>

$(document).ready(function() {
  var max_image = 10;
  var count = 1;

  $('.add-image').click(function(e) {
    e.preventDefault();
    if (count < max_image) {
      count++;
      $('.images').append(`<div class="input" style="width:100px;height:120px;border:2px dashed lightgrey;float:left;margin:8px">    
        <input type ="file" class ="fileup 1" id ="file'+count+'" style="width:100%; height:100%; opacity:0; position: absolute">    
        <img id ="image'+count+'" src="" style="width:100%; height:100%;">    
        <span class="btn btn-sm btn-danger delete" style="position:relative;bottom:20px"><I class="ti-trash"></i></span>    
      </div>`);

      $(document).on('change', '#file' + count, function() {
        readURL(this);
      });

      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
            $('#image' + count).attr('src', e.target.result);
          }
          reader.readAsDataURL(input.files[0]);
        }
      }
    } else {
      alert("Only a maximum of 10 images is allowed");
    }
  });

  $('.images').on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    y--;
  })
});

Answer 1

不是为所有文件使用事件处理程序，而是只使用一个事件处理程序，然后在您的 readURL 函数中使用 .closest('div').find('img') 将 src 添加到图像标签。

演示代码:

$(document).ready(function() {
  // allowed maximum input fields
  var max_image = 10;

  // initialize the counter for textbox
  var count = 1;

  // handle click event on Add More button
  $('.add-image').click(function(e) {

    e.preventDefault();

    if (count < max_image) {

      count++; // increment the counter

      // validate the condition

      $('.images').append(`<div class="input" style="width:100px;height:120px;border:2px dashed lightgrey;float:left;margin:8px">

<input type ="file" class ="fileup 1" id ="file'+count+'" style="width:100%; height:100%; opacity:0; position: absolute">

<img id ="image'+count+'" src="" style="width:100%; height:100%;">

<span class="btn btn-sm btn-danger delete" style="position:relative;bottom:20px"><I class="ti-trash"></i></span>

</div>`); // add input field
 } else {
      alert("Only a maximum of 10 images is allowed");
    }
 });

  // handle click event of the remove link
  $('.images').on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); // remove input field
    y--; // decrement the counter
  })
  
  //put this outside..
  $(document).on('change', '.images input[type=file]', function() {
    readURL(this);
  });

  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
      //get closest div and then find img add img there
        $(input).closest('div').find('img').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-info add-image"><i class="ti-image"></i>  Add image</button>
<br><br>
<div class="images"></div>