Django ImageField - 仅渲染 <input> 元素答案

【问题标题】：Django ImageField - render only the <input> elementDjango ImageField - 仅渲染 <input> 元素
【发布时间】：2018-06-24 06:33:21
【问题描述】：

我有一个 Django 表单，其中有一个 ImageField，我在我的模板中呈现这样的字段：

{{ form.my_image_field }}

生成的 HTML 如下所示：

Currently: <a href="https://....s3.amazonaws.com/....jpg">....jpg</a>
<input name="my_image_field-clear" id="my_image_field-clear_id" type="checkbox">
<label for="my_image_field-clear_id">Clear</label><br>
Change:
<input name="my_image_field" id="id_my_image_field" type="file">

我只想渲染 <input 元素，因为我使用的是 bootstra-fileinput 库：https://www.npmjs.com/package/bootstrap-fileinput：

<input name="my_image_field" id="id_my_image_field" type="file">

是否可以不手动在模板中写入<input>标签来做到这一点？

【问题讨论】：

为什么不在模板中添加<input name="my_image_field" id="id_my_image_field" type="file">？不使用 django 表单
@seuling 这不灵活。为什么要写更多的代码？例如，如果明天我需要更改字段名称怎么办？还是标准化我所有的小部件？
解决这个问题的方法很少。您是否希望此行为仅适用于 ImageFields 或任何/所有输入字段？您是否需要实际消失的 HTML 元素，或者如果额外的 HTML 元素只是在视觉/文本上隐藏起来是否可以接受？
@BabkenVardanyan 你是对的。但是如果你使用{{ form.my_image_field }}，你不是只得到input这个字段吗？
@sytech 我希望这种行为只适用于ImageFields。如果元素只是被隐藏是可以接受的，但这也应该包括 Currently: 和 Change: 文本。

标签： python django django-forms django-uploads

【解决方案1】：

通常，ImageFields 使用 ClearableFileInput 小部件。这个小部件默认使用模板名称django/forms/widgets/clearable_file_input.html.

您可以创建自己的 ClearableFileInput 小部件子类，使用不同的模板。

from django.forms.widgets import ClearableFileInput

class MyImageWidget(ClearableFileInput):
    template_name = "myapp/my_template.html"

该模板的内容可能只是默认模板的<input> 部分，去掉了无关的标签和复选框。您可以根据需要对其进行自定义。可能看起来像

<!-- myapp/my_template.html -->
<input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>

然后在您的表单中指定 ImageField 的小部件

class MyForm(forms.Form):
    #  ...
    my_image_field = forms.ImageField(widget=MyImageWidget)
    #  ...

Django 还提供了一个使用plain template 的FileInput 小部件。如果这适合您的需求，只需这样做

class MyForm(forms.Form):
    #  ...
    my_image_field = forms.ImageField(widget=forms.widgets.FileInput)

或者，您可以通过在项目的template 目录中创建django/forms/widgets/clearable_file_input.html 文件来简单地覆盖默认模板。但是，这会将更改应用于使用 ClearableFileInput 小部件的所有字段的呈现，因此它的方法不那么灵活。

【讨论】：

好的答案，Django 中已经有一个名为FileInput 的小部件，它使用带有普通<input> 标签的模板，调整你的答案，我会接受它。