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>
### 使用 ECharts 和 Python Flask 进行交通数据可视化的实现方法 #### 背景介绍 ECharts 是一个由百度开源的 JavaScript 数据可视化库,支持多种图表类型以及动态交互功能。Python Flask 则是一个轻量级的 Web 应用框架,适合用于构建 RESTful API 或者简单的前端页面服务。两者结合可以创建强大的数据可视化平台。 #### 技术架构概述 通过 Flask 提供后端接口来处理和传递数据,而前端则利用 ECharts 来渲染这些数据并提供丰富的视觉效果[^1]。对于交通数据的应用场景来说,通常会涉及流量统计、路径分析等内容。 #### 后端开发 (Flask 部分) 以下是使用 Flask 构建基本服务器并向客户端发送 JSON 格式的模拟交通数据的一个例子: ```python from flask import Flask, jsonify, render_template app = Flask(__name__) @app.route('/traffic_data') def get_traffic_data(): traffic_info = { 'locations': ['A', 'B', 'C'], 'values': [100, 200, 300], 'timestamps': ['2023-09-01T10:00:00Z', '2023-09-01T11:00:00Z', '2023-09-01T12:00:00Z'] } return jsonify(traffic_info) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True) ``` 此代码片段定义了一个 `/traffic_data` 的路由用来返回一些假定的交通状况数值给前端调用。 #### 前端展示 (HTML & ECharts 部分) 下面是一份 HTML 文件 (`templates/index.html`) 中嵌入 ECharts 图表的例子: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Traffic Data Visualization</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> fetch('/traffic_data') .then(response => response.json()) .then(data => { const chartDom = document.getElementById('main'); const myChart = echarts.init(chartDom); var option; option = { title: { text: 'Traffic Flow' }, tooltip: {}, legend: { data:['Flow'] }, xAxis: {data:data.locations}, yAxis:{}, series:[{ name:'Flow', type:'bar', data:data.values, }] }; myChart.setOption(option); }); </script> </body> </html> ``` 上述脚本实现了从 Flask 获取到的数据绘制柱状图表示不同地点之间的车流差异情况。 #### 结合实际需求扩展功能 可以根据具体业务调整显示样式或者增加更多维度的信息比如时间序列变化曲线等复杂图形;还可以引入地图组件呈现地理空间分布特征等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

leigh_chen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值