表单中的 Django ClearableInputField 不会在 HTML 中呈现 [重复]答案

【问题标题】：Django ClearableInputField in form doesn't render in HTML [duplicate]表单中的 Django ClearableInputField 不会在 HTML 中呈现 [重复]
【发布时间】：2016-06-15 22:39:10
【问题描述】：

我正在开发一个具有照片上传功能的网络应用程序。我创建了一个 ModelForm 来收集最少的用户信息和一张照片，当我在 HTML 中将其呈现为 {{ form.as_p }} 时，允许用户上传图像的字段显示得很好。问题是，表格看起来不太好。

我需要能够手动渲染表单以使其看起来更好。我为此编写了 HTML，除了 ImageFileField 之外，一切看起来都正确。只有标签被呈现，而不是上传按钮、清除文件的复选框等。

我需要做什么才能让 ModelForm 中的 ImageFileField 在我的自定义 HTML 中正确呈现？找不到其他遇到此问题的人。非常感谢！

forms.py sn-p

class PostForm(forms.ModelForm):

    class Meta:
        model = Items
        fields = ('title', 'description', 'image_file')

new_item.html sn-p

<form enctype="multipart/form-data" method="post" action="" class="post-form">

    {% csrf_token %}

    {{ form.non_field_errors }}

    <div class="fieldWrapper">
        {{ form.title.errors }}
        <label for="{{ form.title.id_for_label }}">Title:</label><br>
        {{ form.title }}
    </div><br>

    <div class="fieldWrapper">
        {{ form.description.errors }}
        <label for="{{ form.description.id_for_label }}">Description:    </label><br>
        {{ form.description }}
    </div><br>

    <div class="fieldWrapper">
        {{ form.image_field.errors }}
        <label for="{{ form.image_field.id_for_label }}">Image (optional):</label><br>
        {{ form.image_field }}
    </div>

    <button type="submit" class="save btn btn-default">Save</button>

</form>

models.py sn-p

class Items(models.Model):

    title = models.CharField(max_length=1000, null=False)
    description = models.TextField(max_length=1000, null=False)
    image_file = models.ImageField(max_length=1000,
                                   blank=True,
                                   default='',
                                   null=True,
                                   upload_to='item_photos')

【问题讨论】：

请展示您的模型
@e4c5 我从我的 models.py 中添加了一个 sn-p。
@solarissmoke 在研究这个问题时，我当然会通读您链接到的 SO 问题，因为它可能是重复的。我们的帖子之间的区别在于，我的 ImageFileField 根本不会出现在 HTML 表单的呈现中，而其他人想要自定义一个已经显示的 ImageFileField。我正在寻求有关如何让我的 ImageFileField 呈现的帮助。谢谢！

标签： python html django

【解决方案1】：

默认情况下，django ModelForm 使用 django.forms.ImageField 而不是 ClearableInputField 用于 django.db.ImageField，如 https://docs.djangoproject.com/en/1.9/topics/forms/modelforms/#field-types 所揭示的那样

我相信你的意思是ClearableFileInput

可清除文件输入¶ class ClearableFileInput 文件上传输入：, 带有一个额外的复选框输入以清除字段的值，如果字段不是必需的，具有初始数据。

如何使用它是通过更改类元中的小部件

class PostForm(forms.ModelForm):

    class Meta:
        model = Items
        fields = ('title', 'description', 'image_file')
        widgets = {
            'name': ClearableFileInput(),
        }

【讨论】：

谢谢@e4c5，你是对的。我把字段类型弄混了。我最终参考了 HTML 源代码以获取解决方案。感谢您的帮助！
谢谢，@e4c5，我刚刚赞成你的回答。根据错误消息，我无法“接受”我在明天之前提供的答案。

【解决方案2】：

我最终使用 Chrome 工具来检查页面的 HTML 源代码是否正确呈现（但很难看），并以此为指南根据自己的喜好自定义构建 HTML 表单。这是我需要添加到我的 HTML 表单中以使其正确的内容：

            {% if item.image_file %}
            Currently:
            <a href="{{item.image_file.url}}"> {{item.image_file.url}}</a>
            <input id="image_file-clear_id" name="image_file-clear" type="checkbox" /> <label for="image_file-clear_id">Clear</label><br />Change: <input id="id_image_file" name="image_file" type="file" /></p>
            {% endif %}

            {% if not item.image_file %}
            <input id="id_image_file" name="image_file" type="file" /></p>
            {% endif %}

【讨论】：