如何在 Django 模板中实现点击图片更换并实时预览（无需刷新）

在 Django 的实际开发中，经常会遇到这样的场景：用户想换个头像，最好能直接点一下图片就弹出文件选择器，选完立刻预览，最后再在提交表单时统一上传。这个需求听起来简单，但背后涉及前端预览和后端持久化的巧妙分离。今天就来拆解一下这个经典做法的完整实现与关键细节。 先看 HTML 结构。核心思路是把 `` 标签和隐藏的 `` 放在同一个表单里，点击图片触发文件选择器，选中的文件临时展示在页面上，但不上传。等用户提交表单时，Django 才会真正处理文件上传并更新数据库。这样既避免了无效上传，又让体验更流畅。 具体代码是这样的： ```html ``` 注意，`` 的 `src` 属性直接用了模板变量 `{{ pessoa.imagem.url }}`，如果数据库里没有图片，就用占位图兜底。`` 的 `name="imagem"` 必须和 Django 模型字段名一致，这样表单提交时才能自动映射。 接下来是 Ja vaScript 逻辑。等 DOM 加载完成后，给图片绑定点击事件，触发隐藏的文件选择器；文件选择后，用 `URL.createObjectURL()` 生成临时 URL 并替换图片的 `src`。每次换图前记得释放掉之前的临时 URL，防止内存泄漏。 ```ja vascript document.addEventListener('DOMContentLoaded', function() { const imgElement = document.getElementById("imagem-pessoa"); const fileInput = document.getElementById("input-imagem"); imgElement.addEventListener('click', function() { fileInput.click(); }); fileInput.addEventListener('change', function(event) { const file = event.target.files[0]; if (!file || !file.type.match('image.*')) return; if (imgElement.dataset.previewUrl) { URL.revokeObjectURL(imgElement.dataset.previewUrl); } const objectUrl = URL.createObjectURL(file); imgElement.src = objectUrl; imgElement.dataset.previewUrl = objectUrl; }); }); ``` 几个容易踩的坑，这里提一下： - **Django 后端不用额外处理**：只要 `` 的 `name` 匹配模型字段，表单提交时 Django 会自动处理文件上传，完全不需要额外写 JS 或视图逻辑。 - **`src` 必须可写**：确保图片没有被 CSS 的 `pointer-events: none` 或 JS 阻止交互。如果 `{{ pessoa.imagem.url }}` 为空，记得给个默认占位图，不然浏览器会报 404 错误。 - **兼容性**：`URL.createObjectURL()` 在现代浏览器中广泛支持。如果非要兼容 IE 老古董，可以降级使用 `FileReader`，但现代项目基本用不到。 - **内存管理**：每次换图前要调用 `URL.revokeObjectURL()` 释放前一个临时 URL，否则时间长了页面会越来越卡。 - **提交行为**：预览只改 `` 的 `src`，不影响 `` 的值。用户最终选中的文件会随表单提交，Django 接收的就是这个文件，完全符合预期。 最后验证一下效果： 1. 页面加载 → 显示数据库中的图片（或占位图）。 2. 点击图片 → 弹出系统文件选择器。 3. 选择新图片 → 页面立刻刷新显示新图，原图无缝替换。 4. 点击提交按钮 → 新图片随表单一同上传，模型字段更新。 这个方案零依赖、轻量、可靠，是 Django 图片编辑场景的标准实践。直接拿去用，基本上不会出问题。