Flask + ajax上传文件（四）--数据入库教程

本教程将详细介绍如何使用Flask后端和AJAX前端实现Excel/csv文件上传，并将数据导入数据库的功能。

一、系统架构概述

前端(HTML+JS) → AJAX请求 → Flask后端 → 数据库

二、环境准备

1. 安装必要库

pip install flask pandas sqlalchemy openpyxl

2. 项目结构

data_import_tool/
├── app.py                 # Flask主程序
├── upload/                # 上传文件存储目录
├── static/
│   ├── js/                # jQuery和Bootstrap JS
│   └── css/               # Bootstrap CSS
└── templates/
    └── index.html         # 前端页面

三、前端实现详解

1. 核心HTML结构

    <div class="container main-container border rounded-3 p-4 bg-white">
        <div class="card border-success">
            <div class="card-header text-white bg-success d-flex justify-content-between align-items-center">
                <span><i class="bi bi-database-add">i> 数据入库工具span>
                <small>支持Excel(.xlsx, .xls), CSV(.csv)文件small>
            div>
            <div class="card-body">
                <form id="uploadForm">
                    <div class="row g-3 mb-4">
                        <div class="col-md-3">
                            <label for="dbType" class="form-label">数据库类型label>
                            <select class="form-select" id="dbType" required>
                                <option value="postgresql">PostgreSQLoption>
                                <option value="mysql">MySQLoption>
                                <option value="oracle">Oracleoption>
                                <option value="sqlserver">SQL Serveroption>
                            select>
                        div>
                        <div class="col-md-9">
                            <label for="connectionString" class="form-label">数据库连接字符串label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="connectionString"
                                       value="postgresql://postgres:[email protected]:35254/mydb" required>
                            div>
                        div>
                    div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label for="tableName" class