当前位置：首页 > news >正文

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

news 2025/4/29 5:25:22

本教程将详细介绍如何使用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">PostgreSQL</option><option value="mysql">MySQL</option><option value="oracle">Oracle</option><option value="sqlserver">SQL Server</option></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:123456@192.168.137.129:35254/mydb" required></div></div></div><div class="row g-3 mb-3"><div class="col-md-6"><label for="tableName" class