Laravel foreach循环中如何实现图片预览？

问题根源 #

• HTML里id属性必须唯一，你所有文件输入框都用了id="image"，导致jQuery的$('#image').change()只绑定了第一个输入框，后续输入框的change事件根本触发不了。
• 另外手动维护$i/$j两个索引变量，容易出现不同步的情况，导致图片预览元素和输入框对应不上。

修复步骤 #

1. 调整视图代码 #

把输入框的id改成动态唯一值，添加统一类名用于绑定事件，同时用Laravel循环自带的索引确保预览图和输入框一一对应：

@foreach($items as $index => $item)
    <img id="preview-image-before-upload-{{ $index }}" style="max-height: 150px;">
    <input id="image-{{ $index }}" type="file" class="form-control image-upload" name="item_img[]" data-target="{{ $index }}">
@endforeach

补充说明：

• 用循环的$index（或$loop->index）替代手动维护的$i/$j，彻底避免索引不同步问题
• 给所有输入框加image-upload类，方便后续批量绑定事件
• 预览图id和输入框的data-target用同一个$index，保证对应关系准确

2. 修改JavaScript代码 #

改用类选择器绑定change事件，让所有输入框都能触发预览逻辑：

<script>
$(document).ready(function () { 
    $('.image-upload').change(function(){
        let target = $(this).data('target');
        let reader = new FileReader();

        reader.onload = (e) => { 
            $('#preview-image-before-upload-' + target).attr('src', e.target.result); 
        }

        // 避免用户取消选择文件时报错
        if(this.files[0]){
            reader.readAsDataURL(this.files[0]); 
        }
    });
});
</script>

补充说明：

• 用.image-upload类选择器替代原有的#imageid选择器，实现对所有输入框的事件绑定
• 增加文件存在判断，提升代码健壮性

这样修改后，循环里的每一项文件输入框都能正常触发图片预览效果了。

内容的提问来源于stack exchange，提问作者Muhammad Fahmi