在 Asp.Net Core 中使用 jquery 将图像预览到循环 html 输入？

Question

我在 html 中有一个循环，它创建 4 个输入类型的文件，在这个循环内我有一个 img 标签来预览所选图像...

<div class="gallery_imgproduct">
    @for (int i = 0; i < 4; i++)
    {
    <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="form-group">
            <img id="main_image_product" src="~/site/img/product/286289f713.jpg" />
            <input  type="file" asp-for="ProductImgName" onchange="readURL(this);" class="form-control">                
        </div>

    </div>
    }
</div>

下面的 jQuery 代码仅用于预览输入...

 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#main_image_product')
                .attr('src', e.target.result)
        };
        reader.readAsDataURL(input.files[0]);
    }
}

如果图像被选中，我希望在 img 标签中显示预览... 如果这是可能的，请帮助。如果不是，请提出解决方案。谢谢

Answer 1

在 for 循环中，您的预览图像 ID 为“main_image_product”。 id 必须是唯一的。因此，您可以将该图像标签置于循环之外，或使用 $i 为所有预览图像创建唯一 ID。

<img id="main_image_product" src="~/site/img/product/286289f713.jpg" />
<div class="gallery_imgproduct">
  @for (int i = 0; i < 4; i++)
  {
  <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12">
      <div class="form-group">            
          <input  type="file" asp-for="ProductImgName" onchange="readURL(this);" class="form-control">                
      </div>

  </div>
  }
</div>

或

<div class="gallery_imgproduct">
  @for (int i = 0; i < 4; i++)
  {
  <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12">
      <div class="form-group">
          <img id="main_image_product$i" src="~/site/img/product/286289f713.jpg" />
          <input  type="file" asp-for="ProductImgName" onchange="readURL(this,'main_image_product$i');" class="form-control">                
      </div>

  </div>
  }
</div>

    function readURL(input,imgId) {
  if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
          $('#'+imgId)
              .attr('src', e.target.result);
      };
      reader.readAsDataURL(input.files[0]);
  }
}