首次选择图片无法在预览区显示的JavaScript/jQuery问题求助

问题原因 #

你的代码中if($("#parameters_edit_form img").length != 0)的判断逻辑，只有当表单内已经存在img标签时才会执行图片地址赋值操作。首次上传时页面没有预览用的img元素，逻辑直接跳过，因此不会显示预览。之前上传过图片的场景下，表单渲染时会自动生成对应img标签，所以更新逻辑可以正常执行。

修复方案 #

调整逻辑，不存在预览img元素时先创建元素再赋值，已存在的场景直接更新地址即可，修改后的代码如下：

document.getElementById("id_shield_image").onchange = function () {
    // 增加空文件判断，避免未选择文件时报错
    if (!this.files || !this.files[0]) return;
    var reader = new FileReader();

    reader.onload = function (e) {
        var $previewImg = $("#parameters_edit_form img");
        if($previewImg.length != 0){
            $previewImg.attr('src', e.target.result);
        } else {
            // 首次上传时主动创建预览img元素
            var $newPreview = $('<img>', {
                src: e.target.result,
                alt: '图片预览',
                style: 'max-width: 300px; margin: 12px 0; display: block;'
            });
            // 可根据需求调整插入位置，当前默认插入到表单末尾
            $("#parameters_edit_form").append($newPreview);
        }
    };

    reader.readAsDataURL(this.files[0]);
};

可选优化 #

如果需要更灵活控制预览图的位置，可以提前在表单内预留预览容器：

<form id="parameters_edit_form" enctype="multipart/form-data" method="POST">
    {% csrf_token %}
    <!-- 预留预览容器 -->
    <div id="preview_container" style="margin: 10px 0;"></div>
    {% bootstrap_form %}
</form>

创建预览img时直接插入到#preview_container容器内即可，更方便后续样式调整。

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