当前位置: 首页 > news >正文

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

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

实现功能:
1、同时上传多个图片文件
2、验证文件扩展名
3、显示上传文件的文件名
4、显示文件上传结果
在这里插入图片描述
程序结构
在这里插入图片描述
main.py

from flask import Flask, request, jsonify, render_template
import osapp = 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.filenamefile.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>

相关文章:

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

2023.11.17使用flask将多个图片文件上传至服务器 实现功能&#xff1a; 1、同时上传多个图片文件 2、验证文件扩展名 3、显示上传文件的文件名 4、显示文件上传结果 程序结构 main.py from flask import Flask, request, jsonify, render_template import osapp Flask(__n…...

母婴服务预约小程序的效果如何

二胎家庭增速明显&#xff0c;占比较大&#xff0c;成为市场各母婴品牌的目标&#xff0c;而随着行业发展及市场变化&#xff0c;线上互联网深入人们生活&#xff0c;各家母婴品牌开始向“数字化”靠拢。 目前母婴门店商家主要面临服务/产品线上曝光不足、宣传度不够或扩圈无门…...

Flask实现cookie 开发

要在Flask中实现cookie的开发&#xff0c;可以通过使用Flask提供的set_cookie()和get_cookie()函数来设置和获取cookie值。以下是一个示例&#xff0c;演示如何在Flask应用中使用cookie&#xff1a; from flask import Flask, request, make_responseapp Flask(__name__)app.…...

2311rust,到60版本更新

1.54.0稳定版 属性可调用类似函数的宏 Rust1.54支持在属性中调用类似函数的宏.类似函数的宏是像基于macro_rules!宏一样调用的或像macro!(...)一样的过程宏. 注意,常见用例是,在Rust文档注解中包含其他文件中的文档.如,如果项目的README代表了一个很好的文档注释,则可用incl…...

【开源】基于Vue和SpringBoot的微信小程序的音乐平台

项目编号&#xff1a; S 055 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S055&#xff0c;文末获取源码。} 项目编号&#xff1a;S055&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示 四、核心代码4.1 查询单首…...

adb手机调试常用命令

查看手机型号 adb shell getprop ro.product.model 查看电池状况 adb shell dumpsys battery 查看分辨率 adb shell wm size 查看屏幕密度 adb shell wm density 查看显示屏参数 adb shell dumpsys window displays 查看android_id adb shell settings get secure android…...

IDEA常用插件合集

功能类&#xff1a; 1、Background Image Plus 换壁纸 2、Chinese(Simplified)... 中文语言包 3、Translation 代码翻译 4、Key Promoter X 快捷键提示插件 5、Rainbow bracket 彩虹括号插件 6、Code Glance 代码小地图 效率类 &#xff1a; 1、Tabnine AI Code C…...

【算法】滑动窗口题单——2.不定长滑动窗口(求最长/最大)

文章目录 3. 无重复字符的最长子串1493. 删掉一个元素以后全为 1 的最长子数组904. 水果成篮1695. 删除子数组的最大得分2841. 几乎唯一子数组的最大和2024. 考试的最大困扰度1004. 最大连续1的个数 III1438. 绝对差不超过限制的最长连续子数组2401. 最长优雅子数组解法1——维…...

电子学会C/C++编程等级考试2022年03月(一级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:双精度浮点数的输入输出 输入一个双精度浮点数,保留8位小数,输出这个浮点数。 时间限制:1000 内存限制:65536输入 只有一行,一个双精度浮点数。输出 一行,保留8位小数的浮点数。样例输入 3.1415926535798932样例输出 3.1…...

Libvirt-Qemu-Kvm 操作手记

(持续更新~) 本文主要用于记录在操作libvirt qemu kvm过程中遇到的问题及原因分析。 Hugepage 让qemu使用大页可以减少tdp的size&#xff0c;一定程度上可以提高性能&#xff1b;使用大页可以用memfd或者file backend。 memfd 操作步骤如下&#xff1a; 在系统中reserv…...

代码随想录算法训练营第二十八天| 78 子集 90 子集|| 93 复原IP地址

78 子集 由题意可知数组中的元素互不相同&#xff0c;所以在dfs中我们可以将当前的path直接加入到res中。 class Solution {List<List<Integer>>res new ArrayList<>();List<Integer>path new LinkedList<>();public List<List<Integer…...

9 HDFS架构剖析

问题 100台服务器&#xff0c;存储空间单个200GB 20T 5T文件如何存储&#xff1f; 128MB一块 128MB81GB 1288*10241TB 5T数据分成的128MB的块数 8192 * 5 客户端(client)代表用户通过与namenode和datanode交互来访问整个文件系统。 HDFS集群有两类节点&#xff1a; 一个na…...

Python中的迭代器、生成器和装饰器

当谈到Python中的迭代器、生成器和装饰器时&#xff0c;这三个概念都是与函数和数据处理密切相关的。让我们逐个深入了解它们。 1. 迭代器&#xff08;Iterators&#xff09;&#xff1a; 迭代器是一个可以逐个访问元素的对象。在Python中&#xff0c;迭代器实现了两个方法&a…...

【NGINX--1】基础知识

1、在 Debian/Ubuntu 上安装 NGINX 在 Debian 或 Ubuntu 机器上安装 NGINX 开源版。 更新已配置源的软件包信息&#xff0c;并安装一些有助于配置官方 NGINX 软件包仓库的软件包&#xff1a; apt-get update apt install -y curl gnupg2 ca-certificates lsb-release debian-…...

小米路由器AX1800降级后的SSH登录和关墙等命令

​​​​​​​​​​​​​​​​​​​​​http://192.168.31.1/cgi-bin/luci/;stok429aaa9c7f05ee7d0816a00257b8414a/api/misystem/set_config_iotdev?bssidXiaomi&user_idlongdike&ssid-h%3B%20nvram%20set%20ssh_en%3D1%3B%20nvram%20commit%3B%20sed%20-i%20s%…...

5-什么是猴子补丁,有什么用途?什么是反射,python中如何使用反射?http和https的区别?

1 什么是猴子补丁&#xff0c;有什么用途 **解释**1 Python猴子补丁&#xff08;Monkey Patch&#xff09;是一种在运行时动态修改代码的技术。通在不修改源代码的情况下&#xff0c;改变代码的执行方式或增加功能2 Monkey Patching是在 运行时(run time) 动态替换属性(attrib…...

深信服AC应用控制技术

拓扑图 目录 拓扑图 一.上班时间不允许使用qq(假设上班时间是上午9到12&#xff0c;下午14到18) 1.新增上班时间不允许使用qq访问权限策略 2.将策略应用到组&#xff0c;例如修仙部 3.验证 上班时间发现登录不了 下班时间可以登录 二.上班时间不允许访问视频网站(假设上班时…...

全新云开发工具箱:融合多项功能的微信小程序源码解决方案

全新云开发工具箱&#xff1a;融合多项功能的微信小程序源码解决方案 这款微信小程序源码提供了超过40个功能&#xff0c;集合了各种实用工具&#xff0c;成为一款全能工具箱。这些功能包括证件照制作、垃圾分类查询、个性签名制作、二维码生成、文字九宫格、手持弹幕、照片压…...

Android跨进程通信,IPC,RPC,Binder系统,C语言应用层调用

文章目录 Android跨进程通信&#xff0c;IPC&#xff0c;RPC&#xff0c;Binder系统&#xff0c;C语言应用层调用&#xff08;&#xff09;1.概念2.流程3.bctest.c3.1 注册服务&#xff0c;打开binder驱动3.2 获取服务 4.binder_call Android跨进程通信&#xff0c;IPC&#xf…...

数据结构【DS】栈

共享栈 共享栈的目的是什么&#xff1f; 目的:有效利用存储空间。 共享栈的存取数据时间复杂度为&#xff1f; 存取数据时间复杂度为O(1) 共享栈如何判空&#xff1f;如何判满&#xff1f; 两个栈的栈顶指针都指向栈顶元素&#xff0c;&#x1d461;&#x1d45c;&#x1d45d;…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...

写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

shell脚本质数判断

shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数&#xff09;shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数&#xff09; 思路&#xff1a; 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...