Flask + ajax上传文件（一）

一、概述

本教程将教你如何使用Flask后端和AJAX前端实现文件上传功能，包含完整的代码实现和详细解释。

二、环境准备

1. 所需工具和库

• Python 3.x
• Flask框架
• jQuery库
• Bootstrap（可选，用于美化界面）

2. 安装Flask

pip install flask

三、项目结构

upload_project/
├── app.py                 # Flask主程序
├── upload/                # 上传文件保存目录（自动创建）
└── templates/└── index.html         # 前端页面
└── static/├── js/                # jQuery等JS文件└── css/               # CSS样式文件

四、后端实现 (app.py)

1. 基础设置

import os
import json
from flask import Flask, render_template, request, Responseapp = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'upload'
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)

解释：

• 设置上传文件夹路径
• os.makedirs确保上传目录存在，exist_ok=True避免目录已存在时报错

2. 文件上传路由

@app.route('/upload_file', methods=['POST'])
def upload_file():try:file = request.files['upload_file']file_path = os.path.join(app