如何在Django中使用Bootstrap4美化crispy forms上传表单

你只需要利用django-crispy-forms自带的渲染逻辑和配套Bootstrap的原生控件即可实现目标效果，全程不需要编写自定义CSS。 #

步骤1：修正模板表单渲染逻辑 #

你当前模板中直接使用{{ form }}渲染表单，没有调用crispy的渲染过滤器，所以crispy的样式体系完全没有生效，修改upload_document.html代码如下：

{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}

<h1>Upload</h1>
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form|crispy }}
    <button type="submit" class="btn btn-primary mt-3">Upload</button>
</form>

{% endblock content %}

完成这一步后，表单会自动应用Bootstrap默认样式，已经可以解决你当前样式错乱的问题。 #

步骤2：实现目标效果的美化上传控件 #

如果需要达到你给出的目标图的自定义上传按钮效果，只需要在forms.py中新增crispy表单配置，调用Bootstrap原生的文件控件样式即可，不需要额外编写CSS：

from django import forms
from .models import UploadFile
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Field

class GlForm(forms.ModelForm):
    class Meta:
        model = UploadFile
        fields = ('excel',)
        widgets = {
            'excel': forms.FileInput(attrs={
                'class': 'form-control',
                'accept': '.xls,.xlsx' # 可选，限制只能上传Excel文件
            })
        }

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Field('excel'),
        )
        # 可自定义字段展示名称
        self.fields['excel'].label = "选择Excel文件"

额外修正：模型代码的潜在问题 #

你当前models.py中的__str__方法返回的self.title字段不存在，会触发属性不存在的报错，修改如下即可：

from django.db import models

class UploadFile(models.Model):
    excel = models.FileField(upload_to="excel/", max_length=250)
    
    def __str__(self):
        return self.excel.name

完成以上修改后刷新页面，即可得到和目标效果一致的表单样式。

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