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

Question

我通过单击按钮动态显示文件类型。我在这里只分享 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>

Answer 1

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

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

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>