javascript - 在第二个文件类型上显示的第一个文件类型预览图像

我通过单击按钮来动态显示文件类型。
我在这里仅共享HTML View 源代码。例如，我有两种文件类型。

我正在使用以下代码。我的问题是，当我以第一种文件类型上载图像并进行预览时，要比第二种文件类型上显示的同一图像预览。我需要第一个图像应以第一种文件类型显示，第二个图像应以第二种文件类型显示。

我可以知道我的代码有什么问题吗？

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

<div class="insert-img d-table">
  <img src="https://www.eastmanhandtools.com/new/upload/final_pro/big_img/placeholder-image.png" alt="user-img" class="show-uploaded-img">
  <div class="d-table-cell">
    <input type="file" class="work_pic" name="work_pic[]">
    <label for="work_pic" class="text-underline">Upload</label>
  </div>
</div>

<div class="insert-img d-table">
  <img src="https://www.eastmanhandtools.com/new/upload/final_pro/big_img/placeholder-image.png" alt="user-img" class="show-uploaded-img">
  <div class="d-table-cell">
    <input type="file" class="work_pic" name="work_pic[]">
    <label for="work_pic" class="text-underline">Upload</label>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

最佳答案

问题是因为您正在选择和更新DOM中所有src元素的.show-uploaded-img。

要解决此问题，您需要遍历DOM来查找与引发input事件的change相关的代码:

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

<div class="insert-img d-table">
  <img src="https://www.eastmanhandtools.com/new/upload/final_pro/big_img/placeholder-image.png" alt="user-img" class="show-uploaded-img">
  <div class="d-table-cell">
    <input type="file" class="work_pic" name="work_pic[]">
    <label for="work_pic" class="text-underline">Upload</label>
  </div>
</div>

<div class="insert-img d-table">
  <img src="https://www.eastmanhandtools.com/new/upload/final_pro/big_img/placeholder-image.png" alt="user-img" class="show-uploaded-img">
  <div class="d-table-cell">
    <input type="file" class="work_pic" name="work_pic[]">
    <label for="work_pic" class="text-underline">Upload</label>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>