如何在Django中将Crispy Forms与Bootstrap4上传表单结合使用

前提配置 #

首先确认项目中Crispy Forms已开启Bootstrap4适配，在settings.py中添加配置：

CRISPY_TEMPLATE_PACK = 'bootstrap4'

方案1：通过Crispy Layout自定义字段结构（推荐） #

直接在表单类中定义字段渲染规则，无需大幅修改原有模板逻辑：

步骤1：修改表单类代码 #

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Field
from crispy_forms.bootstrap import StrictButton

class UploadForm(forms.Form):
    # 自定义文件字段，名称可按需修改
    upload_file = forms.FileField(label="选择文件")
    # 其他表单字段示例
    remark = forms.CharField(max_length=200, label="备注")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            # 普通字段直接渲染
            'remark',
            # 包裹上传字段适配Bootstrap custom-file结构
            Div(
                Field(
                    'upload_file',
                    css_class='custom-file-input',
                    id='customFile',
                    label_class='custom-file-label'
                ),
                css_class='custom-file mb-3'
            ),
            # 提交按钮
            StrictButton(
                'Upload and Download!',
                type='submit',
                css_class='btn btn-primary'
            )
        )

步骤2：简化模板代码 #

模板无需额外编写表单结构，直接调用crispy渲染即可：

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {% crispy form %}
</form>

补充功能：选择文件后同步显示文件名 #

Bootstrap自定义上传组件默认不会自动更新label文本，添加以下JS即可实现效果：

<script>
document.querySelector('.custom-file-input').addEventListener('change', function(e) {
    const fileName = e.target.files[0].name;
    e.target.nextElementSibling.innerText = fileName
})
</script>

方案2：模板中手动渲染上传字段 #

如果不想修改表单类，可在模板中拆分字段渲染，单独处理上传组件：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {# 渲染除上传字段外的其他所有字段 #}
    {% for field in form %}
        {% if field.name != 'upload_file' %}
            {{ field|as_crispy_field }}
        {% else %}
            {# 手动编写Bootstrap自定义上传结构，绑定表单字段属性 #}
            <div class="custom-file mb-3">
                <input 
                    type="file" 
                    class="custom-file-input {% if field.errors %}is-invalid{% endif %}" 
                    id="{{ field.id_for_label }}"
                    name="{{ field.name }}"
                    {% if field.field.required %}required{% endif %}
                >
                <label class="custom-file-label" for="{{ field.id_for_label }}">
                    {% if field.value %}{{ field.value }}{% else %}Choose file{% endif %}
                </label>
                {% for error in field.errors %}
                    <div class="invalid-feedback d-block">{{ error }}</div>
                {% endfor %}
            </div>
        {% endif %}
    {% endfor %}
    <button type="submit" class="btn btn-primary">Upload and Download!</button>
</form>

{# 文件名同步JS #}
<script>
document.querySelector('.custom-file-input').addEventListener('change', function(e) {
    const fileName = e.target.files[0].name;
    e.target.nextElementSibling.innerText = fileName
})
</script>

内容的提问来源于stack exchange，提问作者project.py