Django使用django-crispy-forms时图片预览加载导致label内容消失问题求助

问题原因 #

你自定义的onchange事件赋值直接覆盖了django-crispy-forms为Bootstrap自定义文件输入框默认绑定的文件名同步逻辑，因此图片预览正常但label没有更新文件名。

解决方案 #

修改你的JS逻辑，在生成预览的同时手动同步文件名到对应label即可，修改后代码如下：

document.addEventListener('DOMContentLoaded', function() {
    const imageInput = document.getElementById("id_image");
    const previewImg = document.getElementById("image-preview");
    // 选中和文件输入框绑定的label元素
    const fileLabel = document.querySelector('label[for="id_image"]');

    imageInput.onchange = function () {
        if (this.files && this.files[0]) {
            // 生成预览图
            const src = URL.createObjectURL(this.files[0]);
            previewImg.src = src;
            // 同步文件名到label
            fileLabel.textContent = this.files[0].name;
        } else {
            // 处理用户取消文件选择的情况
            previewImg.src = '';
            fileLabel.textContent = '---';
        }
    }
})

如果需要优化预览展示效果，可以给预览图增加样式限制尺寸，例如在你的CSS中添加：

#image-preview {
    max-height: 300px;
    width: auto;
    border-radius: 4px;
}

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