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>

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

1 个答案: