Django模板图片预览替换故障排查及需求实现

核心问题定位 #

你遇到的预览不更新问题，首先是HTML标签语法错误导致JS无法正确操作图片元素，另外还有几个细节需要调整来确保功能正常。

错误点排查 #

你的img标签末尾多了一个多余的右尖括号>>，这会让浏览器解析DOM时出现异常，JS无法正确定位到imagem-pessoa元素或修改其src属性。

修正后的完整代码 #

HTML部分

<img class="rectangle" id="imagem-pessoa" src="{{ pessoa.imagem.url }}" alt="人员照片">
<input type="file" id="input-imagem" style="display: none;" accept="image/*">
<!-- 必须添加表单并指定enctype，否则后端无法接收文件 -->
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <!-- 这里可以添加其他人员信息字段 -->
    <button type="submit">提交更新</button>
</form>

JavaScript部分

// 点击图片唤起文件选择器
document.getElementById("imagem-pessoa").addEventListener('click', function() {
    document.getElementById("input-imagem").click();
});

// 选择新图后更新预览
document.getElementById("input-imagem").addEventListener('change', function(event) {
    const novaImagem = event.target.files[0];
    // 先判断是否选中了有效文件
    if (novaImagem) {
        const urlNovaImagem = URL.createObjectURL(novaImagem);
        document.getElementById("imagem-pessoa").src = urlNovaImagem;
        
        // 可选：页面卸载时释放对象URL，避免内存泄漏
        window.addEventListener('unload', function() {
            URL.revokeObjectURL(urlNovaImagem);
        });
    }
});

关键注意事项 #

1. 表单enctype必须设置：上传文件时必须指定enctype="multipart/form-data"，否则Django后端无法正确接收文件数据。
2. CSRF令牌不可少：Django表单必须包含{% csrf_token %}，否则会触发CSRF验证失败，导致提交请求被拦截。
3. 文件存在性判断：添加if (novaImagem)可以避免用户打开文件管理器后取消选择时出现报错。

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