如何自定义Flask-WTForms中FileField的按钮与输入标签？

需求 #

需要修改Flask-WTForms中FileField的按钮外观以及输入框的标签文本。

现有代码 #

表单字段定义 #

avis_imposition = FileField("Avis d'imposition")

HTML模板代码 #

<p class="labels-container-1">
    {{ form.<file_field_object>.label(class_='labels') }} 
    <br> 
    {{ form.<file_field_object>(class_='form-control-files') }}
    {% for err in form.<file_field_object>.errors %}
        <span class='error'>{{ err }}</span>
    {% endfor %}
</p>

解决方案 #

1. 修改标签文本 #

有两种方式可以修改输入框的标签：

• 方式一：修改表单定义
  直接在FileField构造时修改显示文本：

  avis_imposition = FileField("自定义的文件标签")
  

• 方式二：模板中覆盖标签文本
  在渲染label时通过text参数指定自定义文本，优先级高于表单定义的文本：

  {{ form.avis_imposition.label(class_='labels', text='自定义标签') }}
  

2. 自定义FileField按钮样式 #

原生文件选择按钮的样式受浏览器限制，无法直接修改，通常用以下方法替换：

修改后的模板代码

<p class="labels-container-1">
    {{ form.avis_imposition.label(class_='labels') }} 
    <br>
    <!-- 自定义按钮容器 -->
    <div class="custom-file-container">
        <button type="button" class="custom-file-btn">选择文件</button>
        <span class="file-name">未选择文件</span>
        <!-- 隐藏原生FileField -->
        {{ form.avis_imposition(class_='form-control-files hidden-file-input') }}
    </div>
    {% for err in form.avis_imposition.errors %}
        <span class='error'>{{ err }}</span>
    {% endfor %}
</p>

<script>
// 点击自定义按钮触发原生input点击
const fileInput = document.querySelector('.hidden-file-input');
const fileNameDisplay = document.querySelector('.file-name');
const customBtn = document.querySelector('.custom-file-btn');

customBtn.addEventListener('click', () => {
    fileInput.click();
});

// 选择文件后更新显示的文件名
fileInput.addEventListener('change', () => {
    if (fileInput.files.length > 0) {
        fileNameDisplay.textContent = fileInput.files[0].name;
    } else {
        fileNameDisplay.textContent = '未选择文件';
    }
});
</script>

对应的CSS样式

/* 隐藏原生文件输入框 */
.hidden-file-input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

/* 自定义按钮样式 */
.custom-file-btn {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.custom-file-btn:hover {
    background-color: #0056b3;
}

/* 文件名显示样式 */
.file-name {
    margin-left: 10px;
    color: #666;
}

以上方案既能修改标签文本，又能完全自定义按钮外观，同时保留FileField原有的表单验证功能。

内容的提问来源于stack exchange，提问作者Marco Rodrigues