上传图片的预览

解决：在上传图片时，1显示已有的图片 2显示准备替换的图片

前

后

在这个案例中可以预览到 【已有与准备替换】 2张图片

具体流程

1创建一个共享组件

与manage.py同级别路径的文件

manage.py
custom_widgets.py

# custom_widgets.py
from django import forms
from django.utils.safestring import mark_safe
from django.template.loader import render_to_stringclass CustomClearableFileInput(forms.ClearableFileInput):template_name = 'custom_clearable_file_input.html'def render(self, name, value, attrs=None, renderer=None):context = self.get_context(name, value, attrs)return mark_safe(render_to_string(self.template_name, context))

2 在templates中创建这个组件用到的html文件

templates/custom_clearable_file_input.html

{% if widget.is_initial %}<div class="current-image"><p>当前图片:</p><img src="{{ widget.value.url }}" style="max-width: 200px; max-height: 200px;" alt="现有使用中的图片" />{% if not widget.is_required %}<span class="clearable-file-input"><input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"><label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label></span>{% endif %}</div>
{% endif %}
<div class="new-image"><p>上传新图片:</p><input type="file" name="{{ widget.name }}" accept="image/*" id="{{ widget.attrs.id }}">&l