使用jQuery清空div失效：主图上传预览无法更新问题排查

嘿，我一眼就揪出问题根源了！你现在遇到的主图预览容器清空无效的问题，本质是ID重复冲突导致的，我给你拆解清楚并修复：

核心问题分析 #

看你的HTML代码就能发现关键bug：

• 文件输入框的id是primary：<input type="file" class="custom-file-input" id="primary" name="primaryimg" aria-describedby="primary">
• 主图预览容器的id也是primary：<div class="card primary" id="primary"></div>

当你在JS里执行$('#primary').empty()时，jQuery会优先匹配到文件输入框元素，而不是你想要的预览div容器——对input元素执行empty()当然不会有任何视觉变化，这就是为什么控制台能输出deleted但容器没清空的原因！

修复方案 #

只需要修改预览容器的ID避免重复，再同步更新JS里的选择器即可：

修改后的HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroupFileAddon01">@lang('product.upload')</span>
        </div>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="primary-input" name="primaryimg" aria-describedby="primary">
            <label class="custom-file-label" for="primaryimg">Choose file</label>
        </div>
    </div>
    <input type="file" name="image[]" multiple id="gallery-photo-add">
    <!-- 修改预览容器ID为primary-preview -->
    <div class="card primary" id="primary-preview"></div>
    <div class="gallery row" id="gallery"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>

修改后的JS代码

$(function() { // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview, type) {
        if (type === 'multiple') {
            if ($('#gallery').children().length > 1) {
                $('#gallery').children().slice(1).remove();
            }
        } else if (type === 'primary') {
            // 这里改为新的容器ID
            $('#primary-preview').empty();
            console.log('deleted');
        }
        if (input.files) {
            var filesAmount = input.files.length;
            // 主图只展示第一张，限制循环次数为1
            var loopLimit = type === 'primary' ? 1 : filesAmount;
            for (i = 0; i < loopLimit; i++) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview).addClass('col rounded upload-img shadow-sm');
                }
                reader.readAsDataURL(input.files[i]);
            }
        }
        var $fileUpload = $("input[type='file']");
        if (parseInt($fileUpload.get(0).files.length) > 2) {
            alert("You can only upload a maximum of 2 files");
        }
    };
    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery', 'multiple');
    });
    // 绑定事件的选择器改为修改后的输入框ID
    $('#primary-input').on('change', function() {
        imagesPreview(this, 'div.primary-preview', 'primary');
        // 额外优化：更新自定义文件标签文本
        $(this).next('.custom-file-label').text(this.files[0].name);
    });
});

额外优化说明 #

我顺便给你加了两个小优化：

1. 主图上传限制只展示第一张，避免用户误选多张（虽然input没开multiple，但多一层保险）；
2. 上传后更新自定义文件标签的文本，让用户能直观看到当前选中的文件名。

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