Flask应用中用户提交前编辑删除已上传文件列表的实现方案求助

你要的功能可以在保留原有WTForms表单结构的基础上，加少量原生前端JS实现，后端几乎不需要改动，完全符合你优先使用WTForms的需求。

后端代码调整（App.py） #

你原有代码的index路由缺少POST方法支持，先补上，其他表单逻辑完全不变：

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, MultipleFileField, SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'example'


class exampleUpload(FlaskForm):
    name = StringField('name')
    input_files = MultipleFileField('files')
    submit = SubmitField('submit')


# 补充POST方法支持
@app.route('/', methods=['GET', 'POST'])
def index():
    form = exampleUpload()
    if form.validate_on_submit():
        if form.submit.data:
            files = form.input_files.data
            # 直接拿到最终筛选后的文件列表，原有业务逻辑无需修改
            # do_something(files)
        return '<h1> Done'
    return render_template('index.html', form=form)


if __name__ == "__main__":
    app.run(debug=True)

前端模板修改（index.html） #

替换原有模板内容，新增文件列表展示、新增/删除逻辑，完全兼容原有表单提交规则：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 补充表单标签、CSRF字段和文件上传必要的enctype属性 -->
    <form method="POST" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        {{ form.name }}
        <!-- 给文件输入框绑定id方便JS操作 -->
        {{ form.input_files(id="input_files") }}
        <!-- 用于展示已选文件列表 -->
        <div id="file_list" style="margin: 10px 0;"></div>
        <hr>
        {{ form.submit }}
    </form>

    <script>
        // 全局存储已选的文件列表
        let selectedFiles = []
        const fileInput = document.getElementById('input_files')
        const fileListDiv = document.getElementById('file_list')

        // 监听文件选择事件，累加新选的文件
        fileInput.addEventListener('change', e => {
            selectedFiles.push(...Array.from(e.target.files))
            // 清空输入框避免重复选择
            fileInput.value = ''
            renderFileList()
        })

        // 渲染已选文件列表
        function renderFileList() {
            fileListDiv.innerHTML = ''
            selectedFiles.forEach((file, index) => {
                const item = document.createElement('div')
                item.style.margin = '5px 0'
                item.innerHTML = `${file.name} <button type="button" onclick="deleteFile(${index})">删除</button>`
                fileListDiv.appendChild(item)
            })
        }

        // 删除指定文件
        function deleteFile(index) {
            selectedFiles.splice(index, 1)
            renderFileList()
        }

        // 表单提交前把最终文件列表赋值回WTForms的文件字段
        document.querySelector('form').addEventListener('submit', e => {
            e.preventDefault()
            const dataTransfer = new DataTransfer()
            selectedFiles.forEach(file => dataTransfer.items.add(file))
            fileInput.files = dataTransfer.files
            e.target.submit()
        })
    </script>
</body>
</html>

功能说明 #

• 选择文件后会自动在页面展示所有已选文件的文件名
• 多次选择文件会自动累加，不会覆盖之前已选的内容
• 点击文件名后的删除按钮可以移除对应误传的文件
• 最终点击提交后，后端可以直接通过form.input_files.data拿到最终的文件列表，和原有WTForms的使用逻辑完全一致，不需要额外适配

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