Flask上传文件后在对应按钮右侧显示df.head()的实现方案

刚好之前做过一模一样的需求，给你拆解下具体怎么实现，分后端路由处理和前端布局两部分，都是直接能用的代码：

1. 后端/upload路由处理 #

首先得在上传接口里完成文件读取、把DataFrame转成HTML表格的工作，还要把训练集和测试集的表格数据分别传给模板。这里几个细节要注意：

• 得判断上传的是CSV还是Excel，避免读错文件报错
• 转HTML的时候记得关掉索引（默认会显示行号），再加个Bootstrap样式类，不然表格会丑到没法看

直接上代码：

from flask import Flask, render_template, request
import pandas as pd

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def upload_data():
    train_preview = None
    test_preview = None
    if request.method == 'POST':
        # 处理训练集上传
        train_file = request.files.get('train_file')
        if train_file and train_file.filename.endswith(('.csv', '.xlsx')):
            # 根据后缀选读取方式
            train_df = pd.read_csv(train_file) if train_file.filename.endswith('.csv') else pd.read_excel(train_file)
            # 转成带样式的HTML表格，去掉索引
            train_preview = train_df.head().to_html(classes='table table-sm table-bordered', index=False)
        
        # 处理测试集上传，逻辑和训练集一样
        test_file = request.files.get('test_file')
        if test_file and test_file.filename.endswith(('.csv', '.xlsx')):
            test_df = pd.read_csv(test_file) if test_file.filename.endswith('.csv') else pd.read_excel(test_file)
            test_preview = test_df.head().to_html(classes='table table-sm table-bordered', index=False)
    
    return render_template('upload.html', train_table=train_preview, test_table=test_preview)

2. 前端模板布局（upload.html） #

要实现“按钮/上传框在左，表格在右”的布局，用Bootstrap的网格系统最方便，不用自己写复杂的CSS。另外还要做条件渲染——没上传文件的时候别显示空表格。

模板代码如下，已经加了Bootstrap的CDN，直接用就行：

<!DOCTYPE html>
<html>
<head>
    <title>数据集上传预览</title>
    <!-- 引入Bootstrap CSS，搞定布局和表格样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4">
    <h2>训练集 & 测试集上传</h2>
    <form method="POST" enctype="multipart/form-data" class="mt-4">
        <!-- 训练集区域：上传框在左，表格在右 -->
        <div class="row mb-4 align-items-start">
            <div class="col-md-2">
                <label for="train_file" class="form-label">训练集:</label>
                <input type="file" name="train_file" id="train_file" class="form-control">
            </div>
            <div class="col-md-10">
                {% if train_table %}
                    <h5>训练集数据预览</h5>
                    <!-- 一定要加|safe过滤器！不然Jinja会把HTML转成文本显示 -->
                    {{ train_table|safe }}
                {% endif %}
            </div>
        </div>

        <!-- 测试集区域，和训练集结构一样 -->
        <div class="row mb-4 align-items-start">
            <div class="col-md-2">
                <label for="test_file" class="form-label">测试集:</label>
                <input type="file" name="test_file" id="test_file" class="form-control">
            </div>
            <div class="col-md-10">
                {% if test_table %}
                    <h5>测试集数据预览</h5>
                    {{ test_table|safe }}
                {% endif %}
            </div>
        </div>

        <button type="submit" class="btn btn-primary">上传并查看预览</button>
    </form>
</body>
</html>

几个踩过的小坑提醒 #

• 必须加|safe过滤器：Jinja2默认会把所有HTML代码转义成纯文本，不加这个的话，你看到的会是一堆<table>标签而不是表格
• 表格样式优化：用to_html(classes='...')加Bootstrap的表格类，比如table-sm让表格更紧凑，适合预览
• 文件类型校验：后端一定要判断文件后缀，不然用户上传个txt或者图片，直接读会报错
• 布局对齐：用row和col-md-*的组合，确保在电脑屏幕上是左右排列，手机上会自动变成上下，适配移动端

这样弄完之后，用户上传文件点击提交，就能在对应上传框的右侧看到清晰的前5行数据预览了，完全符合你的布局需求~

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