Flask表单验证失败后如何保留FileField已选文件信息？

这个问题其实是浏览器安全限制导致的——出于安全考虑，浏览器不允许JavaScript直接修改<input type="file">的value属性，所以没法让原生的FileField自动保留已选文件信息。不过我们可以通过前端模拟显示+后端临时存储的方案来解决，正好也能配合你提前用AJAX上传文件的需求。下面是具体实现步骤：

1. 用AJAX提前将文件上传到后端临时存储，后端返回每个文件的唯一标识（比如UUID）
2. 隐藏原生的FileField，用自定义UI展示已选文件名
3. 把文件标识存在隐藏的input中，表单提交时一起发送给后端
4. 表单验证失败时，后端把之前上传的文件名和标识传回前端，前端用自定义UI回显

模板代码（示例：upload.html） #

<form method="POST" enctype="multipart/form-data" id="uploadForm">
    {{ form.hidden_tag() }}
    
    <!-- Name字段 -->
    <div class="mb-3">
        {{ form.name.label(class="form-label") }}
        {{ form.name(class="form-control") }}
        {% for error in form.name.errors %}
            <span class="text-danger d-block mt-1">{{ error }}</span>
        {% endfor %}
    </div>

    <!-- 自定义文件上传区域 -->
    <div class="mb-3">
        <label class="form-label">File(s) Upload</label>
        <!-- 隐藏原生FileField -->
        {{ form.docFile(id="docFile", style="display:none") }}
        <!-- 自定义选择按钮 -->
        <button type="button" class="btn btn-primary" onclick="document.getElementById('docFile').click()">选择文件</button>
        <!-- 文件名显示区域 -->
        <div id="fileNames" class="mt-2">
            <!-- 表单验证失败时回显已上传文件名 -->
            {% if uploaded_files %}
                {% for file in uploaded_files %}
                    <span class="badge bg-secondary me-1">{{ file.filename }}</span>
                    <input type="hidden" name="file_ids" value="{{ file.file_id }}">
                {% endfor %}
            {% endif %}
        </div>
    </div>

    <!-- Author字段 -->
    <div class="mb-3">
        {{ form.author.label(class="form-label") }}
        {{ form.author(class="form-control") }}
        {% for error in form.author.errors %}
            <span class="text-danger d-block mt-1">{{ error }}</span>
        {% endfor %}
    </div>

    {{ form.submit(class="btn btn-success") }}
</form>

JavaScript代码（可放在模板末尾或单独JS文件） #

document.getElementById('docFile').addEventListener('change', async function(e) {
    const files = e.target.files;
    const fileNamesDiv = document.getElementById('fileNames');
    
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const formData = new FormData();
        formData.append('file', file);

        // 发送AJAX请求上传文件到后端临时存储
        try {
            const response = await fetch('/upload-ajax', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();
            if (result.success) {
                // 在页面显示已上传文件名
                const badge = document.createElement('span');
                badge.className = 'badge bg-secondary me-1';
                badge.textContent = result.filename;
                fileNamesDiv.appendChild(badge);

                // 添加隐藏input存储文件唯一标识，表单提交时一起发送
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'file_ids';
                hiddenInput.value = result.file_id;
                fileNamesDiv.appendChild(hiddenInput);
            } else {
                alert('文件上传失败：' + result.message);
            }
        } catch (err) {
            alert('网络错误，文件上传失败');
            console.error(err);
        }
    }

    // 清空原生FileField的值，允许用户重新选择相同文件
    e.target.value = '';
});

基础配置与表单类 #

import os
import uuid
from flask import Flask, render_template, request, jsonify, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, FileField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'
# 临时文件存储目录，确保目录存在
UPLOAD_TEMP_DIR = 'uploads/temp'
os.makedirs(UPLOAD_TEMP_DIR, exist_ok=True)

class UploadFileForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    docFile = FileField('File(s) Upload', render_kw={'multiple': True})
    author = StringField('Author', validators=[DataRequired("Select Document Author")])
    submit = SubmitField('Save')

AJAX文件上传路由 #

@app.route('/upload-ajax', methods=['POST'])
def upload_ajax():
    if 'file' not in request.files:
        return jsonify({'success': False, 'message': '未选择任何文件'})
    
    file = request.files['file']
    if file.filename == '':
        return jsonify({'success': False, 'message': '文件名不能为空'})
    
    # 生成唯一文件标识，避免文件名冲突
    file_id = str(uuid.uuid4())
    file_ext = os.path.splitext(file.filename)[1]
    temp_filename = f"{file_id}{file_ext}"
    temp_path = os.path.join(UPLOAD_TEMP_DIR, temp_filename)
    
    # 保存文件到临时目录
    file.save(temp_path)
    
    return jsonify({
        'success': True,
        'file_id': file_id,
        'filename': file.filename
    })

表单处理路由 #

@app.route('/', methods=['GET', 'POST'])
def upload_form():
    form = UploadFileForm()
    uploaded_files = []
    
    if request.method == 'POST':
        # 获取隐藏input中的文件标识列表
        file_ids = request.form.getlist('file_ids')
        
        # 验证表单字段（FileField无需验证，因为已经通过AJAX上传）
        if form.validate():
            # 这里处理业务逻辑：比如根据file_ids找到临时文件，移动到最终存储目录
            # for file_id in file_ids:
            #     temp_file_path = os.path.join(UPLOAD_TEMP_DIR, f"{file_id}.*")
            #     # 执行文件移动/数据库记录等操作...
            return redirect(url_for('success'))
        else:
            # 验证失败，获取已上传文件的原始文件名，用于页面回显
            for file_id in file_ids:
                for filename in os.listdir(UPLOAD_TEMP_DIR):
                    if filename.startswith(file_id):
                        original_filename = filename.replace(f"{file_id}", "").lstrip('.')
                        uploaded_files.append({'file_id': file_id, 'filename': original_filename})
                        break
    
    return render_template('upload.html', form=form, uploaded_files=uploaded_files)

@app.route('/success')
def success():
    return "表单提交成功！"

1. 临时文件清理：临时目录会积累大量文件，建议用定时任务（比如APScheduler）定期删除过期文件（例如24小时前的文件）
2. 安全校验：在AJAX上传时，要添加文件类型、大小校验，防止恶意文件上传（比如检查file.content_type或文件扩展名）
3. 多文件支持：上述代码已经适配了multiple属性的多文件上传需求
4. 重复选择文件：JS中设置e.target.value = ''，可以解决浏览器默认不触发相同文件change事件的问题

内容的提问来源于stack exchange，提问作者Sharadhi Ballal