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>
相关推荐
jie*几秒前
小杰深度学习(ten)——视觉-经典神经网络——LetNet
人工智能·python·深度学习·神经网络·计算机网络·数据分析
大叔_爱编程9 分钟前
基于Python的交通数据分析应用-hadoop+django
hadoop·python·django·毕业设计·源码·课程设计·交通数据分析
Blossom.11825 分钟前
用一颗MCU跑通7B大模型:RISC-V+SRAM极致量化实战
人工智能·python·单片机·嵌入式硬件·opencv·机器学习·risc-v
qq7621182230 分钟前
Linux c 在内存中创建zip,最后写入测试
linux·运维·服务器
工业互联网专业43 分钟前
基于大数据的学习资源推送系统的设计与实现 _django
vue.js·python·django·毕业设计·源码·课程设计·学习资源推送系统
jayxuyj43 分钟前
MySQL8.0新特性探秘深入解析窗口函数的性能优化策略
服务器
U_U20461 小时前
[Linux]深入解析Systemd服务单元从配置到故障排除的完整指南
flask
华纳云IDC服务商1 小时前
网站服务器频繁掉线的主要原因是什么
运维·服务器
小黄人软件1 小时前
【部署python网站】宝塔面板 小目标2:实时搜索网上资源文件网站放在服务器上 用AI做一个作品,不断迭代。
运维·服务器
未来之窗软件服务1 小时前
服务器运维(四)服务器漏洞扫描工具与审查——东方仙化神期
运维·服务器·仙盟创梦ide·东方仙盟·东方仙盟运维