Laravel多新增行场景下上传前图片预览异常问题排查

你的问题出在两个核心点：动态新增元素未绑定事件、预览容器选择范围错误，以下是修正后的完整代码及说明：

修正后的预览脚本 #

// 清空初始输入值
$('input[type="file"][name="param_img[]"]').val('');

// 图片预览：使用事件委托处理动态新增元素
$(document).on('change', 'input[type="file"][name="param_img[]"]', function(){
    // 原生DOM直接取值更高效
    var img_path = this.value;
    // 关键：精准定位当前输入框所在行的预览容器
    var param_img_holder = $(this).closest('tr').find('.param_img_holder');
    var extension = img_path.substring(img_path.lastIndexOf('.')+1).toLowerCase();
    
    if(['jpeg', 'jpg', 'png', 'gif', 'webp'].includes(extension)){
        if(typeof(FileReader) != 'undefined'){
            param_img_holder.empty();
            var reader = new FileReader();
            reader.onload = function(e){
                $('<img/>',{
                    'src':e.target.result,
                    'class':'img-fluid',
                    'style':'width:110px; height:70px; margin-bottom:10px;'
                }).appendTo(param_img_holder);
            }
            param_img_holder.show();
            reader.readAsDataURL(this.files[0]);
        }else{
            param_img_holder.html('该浏览器不支持FileReader功能');
        }
    }else{
        param_img_holder.empty();
    }
});

问题原因及修正说明 #

1. 事件绑定方式错误
   原代码直接给input元素绑定change事件，仅能作用于页面加载时已存在的元素。动态新增的行属于后续创建的DOM元素，不会自动绑定该事件。改用事件委托$(document).on('change', 选择器, 回调)，可监听所有现有及未来新增的匹配元素。

2. 预览容器选择范围错误
   原代码用$('.param_img_holder')会选中页面上所有该类名的容器，导致新增行选择图片时，所有行的预览容器都会被修改。通过$(this).closest('tr').find('.param_img_holder')，可精准定位当前输入框所在行的预览容器，确保预览只作用于当前行。

3. jQuery对象取值错误
   原代码中$(this).value是错误写法，jQuery对象需用.val()方法，或直接使用原生DOM的this.value（更高效）。

内容的提问来源于stack exchange，提问作者MD. RONY AHMED