javascript - 动态获取文件类型时仅显示名称的预览图像

Question

我在单击 anchor 标记时动态显示文件类型。我可以预览第一种文件类型中的图像，但无法预览动态显示的第二种文件类型中的图像。我只得到图像名称。

我正在获取输出。

检查下图。在第一个文件类型中显示图像，但在第二个文件类型中，仅显示名称。

你能帮我解决这个问题吗？

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  //Once add button is clicked
  $(document).on('click', '#addMoreEntry', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(".work").append("<div class='workBoxFormWrapper form-bottom-border'><h3 class='text-red text-upper'>Entry 1</h3><div class='row'><div class='col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12'> <span>Please upload the image</span><div class='insert-img d-table'> <img src='https://www.rabata.org/wp-content/uploads/2018/05/dummy.png' alt='user-img' class='show-uploaded-img'><div class='d-table-cell findbrowse'> <input type='file' name='work_pic[]' class='work_pic'><label for='work_pic' class='text-underline openbrowse'> Upload</label></div></div></div></div></div>")
    }
  });
  //Once remove button is clicked
  $('.work').on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
  });
});

function workimage_preview(input) {
  if (input.files && input.files[0]) {
    var $input = $(input);
    var reader = new FileReader();
    reader.onload = function(e) {
      $input.closest('.workBoxFormWrapper').find('.show-uploaded-img').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$(".work_pic").change(function() {
  workimage_preview(this);
  //alert('hello');
});

<div class="work">
  <div class='workBoxFormWrapper form-bottom-border'>
    <h3 class='text-red text-upper'>Entry 1</h3>
    <div class='row'>
      <div class='col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12'> <span>Please upload the image</span>
        <div class='insert-img d-table'> <img src='https://www.rabata.org/wp-content/uploads/2018/05/dummy.png' alt='user-img' class='show-uploaded-img'>
          <div class='d-table-cell findbrowse'> <input type='file' name='work_pic[]' class='work_pic'> <label for='work_pic' class='text-underline openbrowse'> Upload</label></div>
        </div>
      </div>
    </div>
  </div>
</div>

<a href="javascript:void(0);" id="addMoreEntry"> + Click to add more entry</a>

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

Answer 1

当您添加监听器时，动态输入尚不存在，因此它们没有此监听器。

您可以做的就是向其中添加onchange="myfunction(this)"，如下所示:

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  //Once add button is clicked
  $(document).on('click', '#addMoreEntry', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(".work").append("<div class='workBoxFormWrapper form-bottom-border'><h3 class='text-red text-upper'>Entry 1</h3><div class='row'><div class='col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12'> <span>Please upload the image</span><div class='insert-img d-table'> <img src='assets/images/upload-img.png' alt='user-img' class='show-uploaded-img'><div class='d-table-cell findbrowse'> <input type='file' name='work_pic[]' class='work_pic' onchange='workimage_preview(this)'><label for='work_pic' class='text-underline openbrowse'> Upload</label></div></div></div></div></div>")
    }
  });
  //Once remove button is clicked
  $('.work').on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
  });
});

function workimage_preview(input) {
  if (input.files && input.files[0]) {
    var $input = $(input);
    var reader = new FileReader();
    reader.onload = function(e) {
      $input.closest('.workBoxFormWrapper').find('.show-uploaded-img').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$(".work_pic").change(function() {
  workimage_preview(this);
  //alert('hello');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="work">
  <div class='workBoxFormWrapper form-bottom-border'>
    <h3 class='text-red text-upper'>Entry 1</h3>
    <div class='row'>
      <div class='col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12'> <span>Please upload the image</span>
        <div class='insert-img d-table'> <img src='assets/images/upload-img.png' alt='user-img' class='show-uploaded-img'>
          <div class='d-table-cell findbrowse'> <input type='file' name='work_pic[]' class='work_pic'> <label for='work_pic' class='text-underline openbrowse'> Upload</label></div>
        </div>
      </div>
    </div>
  </div>
</div>

<a href="javascript:void(0);" id="addMoreEntry"> + Click to add more entry</a>