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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152479.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GaussDB SQL基础语法示例-GOTO语句

目录 一、前言 二、在GaussDB数据库中的概念及语法 1、基本概念 2、语法 三、在GaussDB数据库中的基础示例和限制场景说明 1、基础示例 2、限制场景说明 四、小结 一、前言 SQL是用于访问和处理数据库的标准计算机语言。GaussDB支持SQL标准&#xff08;默认支持SQL2、…

Arcgis 日常天坑问题2——三维场景不能不能加载kml图层,着手解决这个问题

arcgis js api官网介绍kml图层的地址&#xff1a; https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-KMLLayer.html从文档里看到kml图层有诸多限制&#xff0c;比较重要的两点是&#xff1a; 1、不能在三维场景&#xff08;SceneView&#xff09…

算法通关村第十六关黄金挑战——求滑动窗口中的最大值(滑动窗口与堆方法、双端队列法和直接比较法)

大家好&#xff0c;我是怒码少年小码。 今天这篇就讲一道题目&#xff0c;不难&#x1f60e;&#xff0c;但是一定要学会自己思考。 滑动窗口最大值 LeetCode 239&#xff1a;给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。…

使用Grpc实现高性能PHP RPC服务

文档&#xff1a;Quick start | PHP | gRPC 下面将介绍使用 Grpc 和 Protobuf 实现高性能 RPC 服务的具体步骤&#xff1a; 1. 安装 Grpc 和 Protobuf 首先需要安装 Grpc 和 Protobuf。可以从官网下载相应的安装包&#xff08;Supported languages | gRPC&#xff09;或通过…

Vue 实现 Hover 功能( mouseover 与 mouseenter 的区别)

一、mouseover 和 mouseenter 的区别 1.mouseover&#xff1a;当鼠标移入元素或其子元素都会触发事件&#xff0c;所以有一个重复触发&#xff0c;冒泡过程。对应的移除事件是 mouseout 2.mouseenter:当鼠标移入元素本身&#xff08;不包含元素的子元素&#xff09;会触发事件…

python趣味编程-5分钟实现一个贪吃蛇游戏(含源码、步骤讲解)

Python 贪吃蛇游戏代码是用 Python 语言编写的。在这个贪吃蛇游戏中,Python 代码是增强您在创建和设计如何使用 Python 创建贪吃蛇游戏方面的技能和才能的方法。 Python Tkinter中的贪吃蛇游戏是一个简单干净的 GUI,可轻松玩游戏。游戏设计非常简单,用户不会觉得使用和理解…

【旅游行业】Axure旅游社交平台APP端原型图,攻略门票酒店民宿实战模板

作品概况 页面数量&#xff1a;共 110 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;旅游平台&#xff0c;酒店住宿 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本作品为「旅游社交平台」移动端…

灵魂拷问std::enable_shared_from_this,揭秘实现原理

灵魂拷问std::enable_shared_from_this&#xff0c;揭秘实现原理 引言 在C编程中&#xff0c;使用智能指针是一种安全管理对象生命周期的方式。std::shared_ptr是一种允许多个指针共享对象所有权的智能指针。然而&#xff0c;当一个对象需要获取对自身的shared_ptr时&#xff0…

虹科示波器 | 汽车免拆检修 | 1994款凯迪拉克fleetwood车发动机无法起动

一、故障现象 一辆1994款凯迪拉克fleetwood车&#xff0c;搭载5.7L发动机&#xff08;燃油系统采用进气歧管多点喷射&#xff0c;每个气缸都有独立的喷油器&#xff1b;点火系统只有一个点火线圈&#xff0c;带机械分电器和高压线&#xff09;&#xff0c;发动机无法起动。 二、…

浅析RSA非对称加密算法

目录 引言 凯撒密码 对称加密 非对称加密 ​编辑总结 引言 几月前在知乎上看到一个关于RSA公钥与私钥加解密的提问甚感兴趣&#xff0c;却一直没有时间去探究&#xff0c;今日浅得闲时以文记之。 在文章正式开始之前先讲一个小故事&#xff0c;在公元前58年时&#xff0c…

OpenAI GPT5计划泄露

OpenAI的首席执行官萨姆奥特曼在最近接受《金融时报》的专访时&#xff0c;分享了OpenAI未来发展的一些新动向。此外&#xff0c;他还透露了关于即将到来的GPT-5模型以及公司对AGI的长期目标的一些细节。 奥特曼指出&#xff1a; 1.OpenAI正在开发GPT-5&#xff0c;一种更先进的…

反射和序列化操作会破坏单例模式

反射和序列化操作都可能破坏单例模式的实现。 使用反射可以访问类的私有构造函数并强制创建一个新的实例&#xff0c;这将破坏单例模式的唯一性原则&#xff0c;因为它允许创建多个实例。为防止这种情况发生&#xff0c;可以通过在单例类的构造函数中添加防止多次实例化的检查…

【Python】 Python 操作PDF文档

Python 操作PDF文档 1、PDF &#xff08;便携式文件格式&#xff0c;Portable Document Format&#xff09;是由Adobe Systems在1993年用于文件交换所发展出的文件格式。 PDF主要由三项技术组成&#xff1a;衍生自PostScript&#xff1b;字型嵌入系统&#xff1b;资料压缩及传…

原理Redis-ZipList

ZipList 1) ZipList的组成2) ZipList的连锁更新问题3) 总结 1) ZipList的组成 ZipList 是一种特殊的“双端链表” &#xff0c;由一系列特殊编码的连续内存块组成。可以在任意一端进行压入/弹出操作, 并且该操作的时间复杂度为 O(1)。 ZipListEntry: ZipList 中的Entry并不像…

elementUI-表单-校验

配置校验 1、在el-form 标签上配置 <el-form ref"form" :model"form" label-width"120px" :rules"rules"><!-- 若干个的el-form-item标签 --> </el-form>其中 :model“form” 必须配置 表单数据对象 form 指的是…

怎么在echarts图上左右滑动切换数据区间

说在前面 不管前端还是后端&#xff0c;大家或多或少都了解使用过echarts图表吧&#xff0c;很多时候我们只是需要展示指定区间的数据&#xff0c;但有时我们希望在图表上能够轻松地切换数据的展示区间&#xff0c;以便更清晰地观察特定时间段或区域的变化。在本文中&#xff0…

【小爱学大数据】FlinkKafkaConsumer

今天小爱学习FlinkKafkaConsumer。 Apache Flink 是一个流处理和批处理的开源框架&#xff0c;它提供了数据流程序设计模型&#xff0c;以及运行环境和分布式执行引擎。FlinkKafkaConsumer 是 Flink 提供的一个 Kafka 消费者&#xff0c;用于从 Kafka 中消费数据。 下面是一个使…

kafka max.poll.records用法介绍

一、max.poll.records是什么 max.poll.records是Kafka consumer的一个配置参数&#xff0c;表示consumer一次从Kafka broker中拉取的最大消息数目。默认值为500条。 在Kafka中&#xff0c;一个consumer group可以有多个consumer实例&#xff0c;每个consumer实例负责消费一个…

贪吃蛇游戏制作

首先在ecilsp里面创建两个包&#xff0c;启动和图形界面 在创建一个文件夹用来放图片 1.绘制图形界面 package com.snaketuxing.view;import java.awt.Color; import java.awt.EventQueue; import java.awt.Font; import java.awt.Frame; import java.awt.Graphics; import …

Element UI 禁用数字输入框组件添加鼠标滚动事件

Element UI 禁用数字输入框组件添加鼠标滚动事件 <el-input type"number" mousewheel.native.prevent DOMMouseScroll.native.prevent :min"0" onkeyup"this.valuethis.value.match(/\d\.?\d{0,2}/);"v-model"form.threeYearDevelop…