解决:在上传图片时,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