jquery - 在 HTML 表单上预览不同的图像

Question

我有一个 HTML 表单，其中包含多个用于上传图片的输入。单击“选择文件”按钮后，我需要预览每张图片:

$(function() {
  $("#img1").change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg1').attr('src', e.target.result);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td> <input id="img1" name="img1" type="file" /> </td>
    <td> <img id="myImg1" src="#" alt="your image" /> </td>
  </tr>
  <tr>
    <td> <input id="img2" name="img2" type="file" /> </td>
    <td> <img id="myImg2" src="#" alt="your image" /> </td>
  </tr>
  <tr>
    <td> <input id="img3" name="img3" type="file" /> </td>
    <td> <img id="myImg3" src="#" alt="your image" /> </td>
  </tr>
</table>

提前致谢!

Answer 1

要实现这一点，您可以在所有文件输入和 img 元素上放置通用类。从那里您可以使用 DOM 遍历找到与输入相关的 img 并在选择文件时更新它的 src 属性。试试这个:

$(function() {
  $('.img').change(function() {
    if (this.files && this.files[0]) {
      var $view = $(this).closest('tr').find('.view');
      var reader = new FileReader();
      reader.onload = function(e) {
        $view.attr('src', e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input id="img1" name="img1" type="file" class="img" /> </td>
    <td><img id="myImg1" src="#" alt="your image" class="view" /> </td>
  </tr>
  <tr>
    <td><input id="img2" name="img2" type="file" class="img" /> </td>
    <td><img id="myImg2" src="#" alt="your image" class="view" /> </td>
  </tr>
  <tr>
    <td><input id="img3" name="img3" type="file" class="img" /> </td>
    <td><img id="myImg3" src="#" alt="your image" class="view" /> </td>
  </tr>
</table>