Django ModelForm 表单中使用js显示原有图片

在 Django ModelForm 中，你可以使用 `forms.ClearableFileInput` 来生成一个文件上传表单。如果你想要在表单中显示原有图片并且允许用户删除它，可以使用以下步骤：

1. 在 `forms.py` 文件中创建一个类似下面的 `ModelForm`：

from django import forms
from .models import YourModel

class YourModelForm(forms.ModelForm):
    class Meta:
        model = YourModel
        fields = ('field1', 'field2', 'image_field')
        widgets = {
            'image_field': forms.ClearableFileInput(attrs={'id': 'image-preview'})
        }

2. 在模板中使用 JavaScript 和 CSS 实现预览图片的功能。以下是一个示例代码：

{% extends "base.html" %}

{% block content %}
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <img id="image-preview" src="{{ object.image_field.url }}" alt="Preview Image">
    <button type="submit">Save</button>
  </form>
{% endblock %}

{% block javascript %}
  <script>
    // Show preview of the image
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $('#image-preview').attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
      }
    }
    $('#id_image_field').change(function () {
      readURL(this);
    });
  </script>
{% endblock %}

在这个示例中，我们使用 `forms.ClearableFileInput` 生成了一个文件上传表单，并指定了 `id` 为 `image-preview`。在模板中，我们使用 `<img>` 标签来显示原有图片并在用户上传新图片时刷新预览。我们还在模板的底部插入了一个 JavaScript 代码块，用于实现预览图片功能。