2023.11.17使用flask将多个图片文件上传至服务器

2023.11.17使用flask将多个图片文件上传至服务器

实现功能:

1、同时上传多个图片文件

2、验证文件扩展名

3、显示上传文件的文件名

4、显示文件上传结果

程序结构

main.py

复制代码
from flask import Flask, request, jsonify, render_template
import os

app = Flask(__name__)

# 设置上传文件存储目录
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# 允许上传的文件类型
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

@app.route('/')
def index():
    return render_template('index.html')

# 检查文件名是否合法
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

# 处理文件上传
@app.route('/upload', methods=['POST'])
def upload_file():
    files = request.files.getlist("file")
    success_files = []
    failed_files = []

    for file in files:
        if file and allowed_file(file.filename):
            filename = file.filename
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            success_files.append(filename)
        else:
            failed_files.append(file.filename)

    if failed_files:
        return jsonify({'message': '部分文件上传失败', 'failed_files': failed_files})
    else:
        return jsonify({'message': '所有文件上传成功', 'success_files': success_files})

if __name__ == '__main__':
    app.run(debug=True)

index.html

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h1 class="mt-5 mb-4">文件上传</h1>
        <form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
            <div class="custom-file mb-3">
                <input type="file" class="custom-file-input" id="fileInput" name="file" multiple>
                <label class="custom-file-label" for="fileInput">选择文件</label>
            </div>
            <button type="submit" class="btn btn-primary">上传</button>
        </form>

        <div id="result" class="mt-3"></div>
    </div>

    <script>
        document.getElementById('upload-form').addEventListener('submit', function(e) {
            e.preventDefault();

            var formData = new FormData(this);

            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.failed_files) {
                    document.getElementById('result').innerHTML = '<div class="alert alert-danger" role="alert">部分文件上传失败: ' + data.failed_files.join(', ') + '</div>';
                } else {
                    document.getElementById('result').innerHTML = '<div class="alert alert-success" role="alert">' + data.message + '</div>';
                }
            })
            .catch(error => {
                console.error(error);
            });
        });

        // 更新文件选择框显示已选择的文件名
        document.getElementById('fileInput').addEventListener('change', function () {
            var files = this.files;
            var label = "";
            for (var i = 0; i < files.length; i++) {
                label += files[i].name + ', ';
            }
            // /,$/ 表示匹配以逗号结尾的部分。即将最后一个逗号清除
            label = label.replace(/, $/, "");
            this.nextElementSibling.innerText = label;
        });
    </script>
</body>
</html>
相关推荐
骥龙20 分钟前
1.2、实战准备:AI安全研究环境搭建与工具链
人工智能·python·安全
黄思搏21 分钟前
Python + uiautomator2 手机自动化控制教程
python·智能手机·自动化
@LetsTGBot搜索引擎机器人25 分钟前
Telegram 被封是什么原因?如何解决?(附 @letstgbot 搜索引擎重连技巧)
开发语言·python·搜索引擎·机器人·.net
AndrewHZ26 分钟前
【图像处理基石】图像对比度增强入门:从概念到实战(Python+OpenCV)
图像处理·python·opencv·计算机视觉·cv·对比度增强·算法入门
XXX-X-XXJ26 分钟前
Django 用户认证流程详解:从原理到实现
数据库·后端·python·django·sqlite
ybb7046302 小时前
linux第二次作业
linux·运维·服务器
2401_841495642 小时前
【数据结构】基于Prim算法的最小生成树
java·数据结构·c++·python·算法·最小生成树·prim
大白同学4213 小时前
【Linux】进程间通信
linux·运维·服务器
数据村的古老师5 小时前
Python数据分析实战:基于25年黄金价格数据的特征提取与算法应用【数据集可下载】
开发语言·python·数据分析
无聊的小坏坏6 小时前
从零开始:C++ 多线程 TCP 服务器实战(续篇)
服务器·c++·tcp/ip