Asp.Net Core中使用jQuery实现循环生成file输入框的对应图片预览

开发者阿泽

2026-9-27

解决方案

该需求完全可以实现，你当前代码的问题根源是循环生成的所有img元素共用了相同的id属性，HTML规范中id必须唯一，因此jQuery选择器$('#main_image_product')永远只会匹配到第一个img元素，导致只有第一个预览框生效。

步骤1：调整视图代码（规范修复+可选优化）

<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">
            <!-- 把重复的id改成class，符合HTML规范 -->
            <img class="preview_image_product" src="~/site/img/product/286289f713.jpg" />
            <!-- 如果需要后台接收4个上传的文件，需要绑定集合属性的对应下标，示例假设你的ViewModel有List<IFormFile> ProductImgFiles属性 -->
            <input  type="file" asp-for="ProductImgFiles[i]" onchange="readURL(this);" class="form-control">                
        </div>
    </div>
    }
</div>

如果不需要修改现有提交逻辑，也可以暂时不调整input的asp-for属性，仅修改img的id为class即可。

步骤2：修改JS预览逻辑

调整选择器逻辑，从当前触发上传事件的input元素出发，查找对应的img元素：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            // 从当前input出发，找父级form-group下的img元素，确保是当前上传框对应的预览图
            $(input).closest('.form-group').find('img').attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}