上传图片的预览

解决：在上传图片时，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_string

class 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