django - 如何在 Django 模板中自定义 `FileField` 按钮？

Question

我正在尝试上传文件，下面是屏幕截图，有谁知道如何自定义按钮以及 Bootstrap 样式按钮？

模板代码如下:

<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>{{ form.non_field_errors }}</p>

    {#  WL file #}
    <p>{{ form.wlfile.label_tag }} {{ form.wlfile.help_text }}</p>
    <p>
        {{ form.wlfile.errors }}
        {{ form.wlfile }}
    </p>
    {# BL file#}
    <p>{{ form.blfile.label_tag }} {{ form.blfile.help_text }}</p>
    <p>
        {{ form.blfile.errors }}
        {{ form.blfile }}
    </p>

    <div class="form-group">
        <div align="right" class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">{% trans "Next" %}</button>
        </div>
    </div>
</form>

Answer 1

请看这个:https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3

HTML:

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS:

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

工作示例:http://codepen.io/claviska/pen/vAgmd