Django表单中如何实现图片上传后即时预览显示功能

最简便的实现分两种场景，不需要复杂依赖，几行代码就能搞定：

本地上传即时预览（未提交表单时实时展示） #

这个方案不需要后端参与，用户选完本地图片立刻就能看到效果，没有上传等待延迟，体验最好。

• 先在上传输入框下方加个预览用的img标签：

<!-- 图片上传字段，accept限制仅选图片文件 -->
<input type="file" name="image" accept="image/*" id="id_image">
<!-- 预览容器，默认隐藏，选完文件再显示 -->
<div style="margin-top: 8px;">
  <img id="preview" src="" style="max-height: 200px; display: none;" alt="上传预览">
</div>

• 加几行原生JS监听文件选择事件即可，不需要引入任何第三方库：

const uploadField = document.getElementById('id_image');
const previewDom = document.getElementById('preview');
uploadField.addEventListener('change', () => {
  const selectedFile = uploadField.files[0];
  if (selectedFile) {
    // 生成浏览器本地临时文件地址，不用上传到服务器就能读取
    previewDom.src = URL.createObjectURL(selectedFile);
    previewDom.style.display = 'block';
  }
})

表单提交/编辑场景的已上传图片回显 #

如果是表单校验失败返回重填、或者编辑已有模型数据的场景，直接把服务端存储的图片地址赋值给预览img的src属性即可：

• 如果用后端模板渲染（比如Django、Flask Jinja2），直接在模板里判断是否有已存的图片，存在就渲染：

{% if 模型实例.image %}
  <img src="{{ 模型实例.image.url }}" style="max-height: 200px; display: block; margin-bottom: 8px;" alt="已上传图片">
{% endif %}
<!-- 后面放正常的文件上传输入框即可 -->
<input type="file" name="image" accept="image/*" id="id_image">

• 如果是前后端分离项目，接口拿到已上传的图片URL后，直接把URL赋值给预览img的src属性就行。

更省事的现成方案 #

如果项目已经在用成熟组件库，不需要自己写逻辑，直接开组件自带配置即可：

• Element UI/Element Plus的Upload组件，配置list-type="picture-card"即可自带缩略图预览
• Ant Design的Upload组件，开启showUploadList的预览配置就会自动展示已选/已上传图片
• 用Django Admin、Xadmin这类后台框架的话，只要把image字段加入表单字段配置，编辑页默认就会展示已上传图片的缩略图

小提示：记得给预览图设置max-height/max-width样式限制，避免大尺寸图片撑破表单布局。

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