一、概述

本教程將教你如何使用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