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

2023.11.20使用flask做一个简单图片浏览器

news 2026/5/8 14:51:12

2023.11.20使用flask做一个简单图片浏览器

功能：
（1）输入指定路径，打开文件夹
（2）判断文件格式为图片
（3）在前端进行预览
（4）使用bootstrap进行简单美化
在这里插入图片描述
main.py

from flask import Flask, request, render_template
import osapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')@app.route('/preview_images', methods=['POST'])
def preview_images():folder_path = request.form['folder_path']images = []message = ''if os.path.isdir(folder_path):for filename in os.listdir(folder_path):if filename.endswith('.jpg') or filename.endswith('.jpeg') or filename.endswith('.PNG'):images.append(os.path.join(folder_path, filename))if len(images) == 0:message = '该文件夹中没有图片文件'else:message = f'共找到{len(images)}个图片文件'else:message = '该路径不是一个文件夹'return render_template('index.html', images=images, message=message)if __name__ == '__main__':app.run()

index.html

<!DOCTYPE html>
<html>
<head><title>图片预览</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><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><style>.thumbnail {height: 150px;object-fit: contain;}</style>
</head>
<body><div class="container mt-3"><h2>图片预览</h2><form method="POST" action="/preview_images"><div class="input-group mb-3"><input type="text" id="folderPath" name="folder_path" class="form-control" placeholder="请输入文件夹路径"><button type="submit" class="btn btn-primary">预览</button></div></form>{% if images %}<p>{{ message }}</p><div class="row row-cols-1 row-cols-md-3 g-4">{% for image in images %}<div class="col"><div class="card"><img src="{{ image }}" class="card-img-top thumbnail" alt="..."><div class="card-body"><button type="button" class="btn btn-primary" onclick="previewImage('{{ image }}')">预览</button></div></div></div>{% endfor %}</div>{% else %}<p>{{ message }}</p>{% endif %}</div><script>function previewImage(imageUrl) {window.open(imageUrl, '_blank');}</script>
</body>
</html>

相关文章：

2023.11.20使用flask做一个简单图片浏览器

2023.11.20使用flask做一个简单图片浏览器 功能&#xff1a; &#xff08;1&#xff09;输入指定路径&#xff0c;打开文件夹 &#xff08;2&#xff09;判断文件格式为图片 &#xff08;3&#xff09;在前端进行预览 &#xff08;4&#xff09;使用bootstrap进行简单美化 ma…...

编程日记 2023/11/22 8:40:24

https和http的区别和优势

大家好&#xff0c;我是咕噜-凯撒&#xff0c;HTTP&#xff08;超文本传输协议&#xff09;和HTTPS&#xff08;安全超文本传输协议&#xff09;是用于在网络上传输数据的协议&#xff0c;HTTPS相比HTTP在数据传输过程中更加安全可靠&#xff0c;适合对数据安全性要求较高的场景…...

编程日记 2023/11/22 8:39:22

Docker 启动alpine镜像中可执行程序文件遇到 not found

## 1. 问题&#xff1a; docker alpine镜像中遇到 sh: xxx: not found 例如&#xff1a; 在容器内/app/目录下放置了可执行文件abc&#xff0c;启动时提示not found /app/startup.sh: line 5: ./abc : not found ## 2. 原因 由于alpine镜像使用的是musl libc而不是gnu libc&am…...

编程日记 2023/11/22 8:38:21

.net对接阿里云CSB服务

public Response<string> Main(MonthPlanRequest request){string apiName "MonthPlan", postData request.ToJson(); var result ConnectCSB(apiName, postData);return InvokeResult.Fail<string>("访问成功");}/// <summary>///…...

编程日记 2023/11/22 8:37:20

Json数据格式

json比较可读&#xff0c;通过键值对返回。实现通常有两种方式:一种是自己来构造&#xff0c;也就是用一个对象存储数据&#xff0c;在最后输出时将其json字符串化&#xff1b;第二种是使用 RestController 注解实现json数据返回。 第一种 导入依赖坐标&#xff1a; <depe…...

编程日记 2023/11/22 8:36:18

Kafka-Producer

1、生产者 从编程的角度而言&#xff0c;生产者是一个消息的生产者&#xff0c;它负责创建消息并发送到Kafka集群中的一个或多个topic中。 1.1、客户端开发 一个正常的生产逻辑需要具备以下几个步骤&#xff1a; 配置生产者客户端参数及创建相应的生产者实例构建待发送的消…...

编程日记 2023/11/22 8:35:17

Ubuntu20上离线安装samba

如果联网&#xff0c;一条 sudo apt-get install samba就可能解决问题&#xff0c;但是没有网&#xff0c;那么只能一个一个的解决问题&#xff1a; 我以为装了samba-common就可以了&#xff0c;发现smbd.serverice not found,于是开始了漫长的下载依赖包&#xff0c;安装&…...

编程日记 2023/11/22 8:34:16

【开源】基于Vue.js的教学过程管理系统

项目编号&#xff1a; S 054 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S054&#xff0c;文末获取源码。} 项目编号&#xff1a;S054&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 教师端2.2 学生端2.3 微信小程序端2…...

编程日记 2023/11/22 8:33:16

【C++】泛型编程 ⑪ ( 类模板的运算符重载 - 函数实现 写在类外部的不同的 .h 头文件和 .cpp 代码中 )

文章目录 一、类模板的运算符重载 - 函数实现 写在类外部的不同的 .h 头文件和 .cpp 代码中1、分离代码 后的 友元函数报错信息 - 错误示例Student.h 头文件内容Student.cpp 代码文件内容Test.cpp 代码文件内容执行报错信息 2、问题分析 二、代码示例 - 函数实现 写在类外部的不…...

编程日记 2023/11/22 8:32:14

动手学深度学习——循环神经网络的简洁实现（代码详解）

文章目录 循环神经网络的简洁实现1. 定义模型2. 训练与预测 循环神经网络的简洁实现 # 使用深度学习框架的高级API提供的函数更有效地实现相同的语言模型 import torch from torch import nn from torch.nn import functional as F from d2l import torch as d2lbatch_size, …...

编程日记 2023/11/22 8:31:13

19.删除链表的倒数第 N 个节点

​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;19. 删除链表的倒数第 N 个结点 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 使用双指针找到倒数第 N1 个节点后删除链表的第 N 个节点即可。注意当 N 为链表长度时&#xff0c;倒数第 N1 …...

编程日记 2023/11/22 8:30:12

机器人制作开源方案 | 莲花灯

1. 功能描述 莲花灯是一款基于莲花形象设计的机器人&#xff0c;本文示例将用两种模式来实现莲花灯的亮灭功能。 自主模式&#xff1a;用 光强传感器 控制莲花灯的灯叶开合。暗光情况下灯叶打开&#xff0c;灯亮&#xff1b;强光情况下灯叶闭合&#xff0c;灯灭。 …...

编程日记 2023/11/22 8:28:10

华为无线ac+fit三层组网，每个ap发射不同的业务vlan

ap管理dhcp在ac控制器上&#xff0c;业务dhcp在汇聚上 配置WLAN业务 &#xff08;1&#xff09;配置VAP模板 • 配置员工网络的VAP模板&#xff08;employee&#xff09; [AC-wlan-view] security-profile name employee //创建名为“employee”的安全模板 [AC-wlan-sec-prof-…...

编程日记 2023/11/22 8:27:09

人工智能：科技之光，生活之美

在科技飞速发展的今天&#xff0c;人工智能已经深入到我们的生活中&#xff0c;它如同一束璀璨的科技之光&#xff0c;照亮我们生活的每一个角落&#xff0c;使我们的生活更加美好。下面我将从人工智能的领域、应用以及对人工智能的看法三个方面来谈谈它对我们生活的影响。 一、…...

编程日记 2023/11/22 8:26:08

mysql8.0英文OCP考试第61-70题

Q61.You wish to protect your MySQL database against SQL injection attacks. Which method would fail to do this? A)using stored procedures for any database access B)using PREPARED STATEMENTS C)installing and configuring the Connection Control plugin （ …...

编程日记 2023/11/22 8:25:06

WaveletPool：抗混叠在微小目标检测中的重要性

文章目录 摘要1、简介2、相关研究2.1、微小物体检测2.2. 抗锯齿过滤器3、方法3.1. Wavelet Pooling3.2 一致顺序的Wavelet Pooling的WaveCNet3.3、Bottom-Heavy Backbone4、实验4.1、预训练数据集4.2、微小目标检测数据集4.3、抗混叠方法的选择及应用顺序4.4、小波的选择4.5、T…...

编程日记 2023/11/22 8:23:05

文章系列2：Unraveling the functional dark matter through global metagenomics

这篇文章发布于2023年10月nature。通讯作者是来自于 DOE Joint Genome Institute, Lawrence Berkeley National Laboratory, Berkeley, CA, USA. 背景介绍&目标 作者首先背景介绍了两种主流宏基因组分析方法&#xff0c;包括reads-based reference mapping&#xff08;eg…...

编程日记 2023/11/22 8:21:03

ubuntu 20.04 搭建crash dump问题分析环境

ubuntu 20.04 搭建crash dump问题分析环境 1 安装依赖软件1.1 linux-dump1.2 kexec-tools1.3 安装crash工具1.4 安装gdb调试工具1.5 安装ubuntu内核调试符号1.5.1 GPG 秘钥导入1.5.2 添加仓库配置1.5.3 更新软件包1.5.4 下载和安装内核调试符号1.5.5 验证内核调试符号已经被安装…...

编程日记 2023/11/22 8:19:00

算法训练营一刷 总结篇

今天就是Day60了&#xff0c;坚持了两个月的算法训练营在今天结束了。这两个月中&#xff0c;学习、练习了许许多多的算法&#xff0c;坚持每天完成博客来打卡&#xff0c;养成了写C的习惯&#xff0c;现在相比于Python我反而更喜欢思路严谨的C。感谢这个平台&#xff0c;感谢C…...

编程日记 2023/11/22 8:18:00

Linux中的MFS分布式文件系统

目录 一、MFS分布式文件系统 1、MooseFS简介 2、Moose File System的体系结构 &#xff08;1&#xff09;MooseFS Master &#xff08;2&#xff09;MooseFS Chunk Server &#xff08;3&#xff09;MooseFS Metalogger &#xff08;4&#xff09;MooseFS Client &…...

编程日记 2023/11/22 8:16:57

从四线制蜂窝模块到全球物联网连接：SparqEE Cell v1.0的极简开发实践

1. 项目缘起与核心痛点&#xff1a;为什么我们需要一个“简单”的蜂窝模块&#xff1f;做硬件开发的朋友&#xff0c;尤其是玩过Arduino、树莓派的&#xff0c;大概都经历过一个阶段&#xff1a;想让自己的小项目“上网”&#xff0c;而且是那种不受Wi-Fi范围限制、真正能随时随…...

编程新知 2026/5/8 13:19:43

别再傻傻打包了！UE5多人游戏局域网联机测试，用PIE模式5分钟搞定

别再傻傻打包了&#xff01;UE5多人游戏局域网联机测试&#xff0c;用PIE模式5分钟搞定 每次写完一段多人游戏同步代码&#xff0c;你是不是也迫不及待想拉上同事在局域网里跑一下&#xff1f;但想到要打包、传文件、配IP就头大&#xff1f;其实虚幻引擎5早就为你准备好了更优…...

编程新知 2026/5/8 12:08:20

Scroll Reverser终极指南：3步解决macOS多设备滚动混乱

Scroll Reverser终极指南&#xff1a;3步解决macOS多设备滚动混乱 【免费下载链接】Scroll-Reverser Per-device scrolling prefs on macOS. 项目地址: https://gitcode.com/gh_mirrors/sc/Scroll-Reverser 还在为Mac上触控板和鼠标的滚动方向相反而抓狂吗&#xff1f;S…...

编程新知 2026/5/8 11:24:52

实时面试副驾驶：基于AI的隐形辅助工具设计与实战

1. 项目概述&#xff1a;实时面试副驾驶 最近在准备面试的朋友&#xff0c;或者经常需要参加线上会议、远程答辩的同学&#xff0c;有没有遇到过这样的场景&#xff1a;面试官抛出一个复杂的技术问题&#xff0c;你大脑瞬间一片空白&#xff0c;或者对方语速太快&#xff0c;你…...

编程新知 2026/5/8 11:14:31

UnityMeshSimplifier常见问题排查：从安装到部署的完整解决方案

UnityMeshSimplifier常见问题排查&#xff1a;从安装到部署的完整解决方案 【免费下载链接】UnityMeshSimplifier Mesh simplification for Unity. 项目地址: https://gitcode.com/gh_mirrors/un/UnityMeshSimplifier UnityMeshSimplifier是一款强大的3D网格简化工具&am…...

编程新知 2026/5/8 11:05:02

从零构建主权AI智能体：OpenZero本地部署与核心架构解析

1. 项目概述&#xff1a;从零构建一个主权AI智能体如果你厌倦了那些将你的数据上传到云端、对话内容被审查、功能处处受限的“阉割版”AI助手&#xff0c;那么是时候了解一下“主权AI”这个概念了。今天要深入探讨的&#xff0c;是一个名为OpenZero的开源项目&#xff0c;它代表…...

编程新知 2026/5/8 10:14:28

Azure Logic Apps与Key Vault的自动化密码管理

在当今的云计算环境中，安全性和自动化是至关重要的两个方面。Azure提供了许多工具和服务来帮助企业实现这些目标，其中Azure Logic Apps和Azure Key Vault就是其中两项强大的服务。本文将探讨如何结合使用Azure Logic Apps和Azure Key Vault来实现自动化密码管理，特别是在处理…...

编程新知 2026/5/8 8:31:29

【OC】七大多界面传值总结

【OC】多界面传值总结文章目录【OC】多界面传值总结属性传值(A->B)代理传值(B->A)Block传值&#xff08;B->A&#xff09;通知传值&#xff08;任意&#xff09;KVO传值&#xff08;任意&#xff09;单例传值NSUserDefaults 传值总结与 Trade-off 对比快速对照表详细 …...

编程新知 2026/5/8 7:48:03

【收藏级】2026年大模型入门指南：小白程序员必看，告别AI焦虑，轻松切入AI行业

这篇文章想聊清楚一个很现实的问题&#xff1a;在2026年AI热潮愈演愈烈的今天&#xff0c;小白和程序员到底该怎么低成本进入AI行业&#xff1f; 如果你最近也在焦虑、在内耗&#xff0c;刷到各种AI热点就心慌&#xff0c;不知道该学什么、不知道该怎么开始&#xff0c;甚至担心…...

编程新知 2026/5/8 6:34:12

#81_闲谈语言的分类

机器语言是二进制指令&#xff0c;CPU可直接执行&#xff1b; 低级语言通常指机器语言和汇编语言&#xff0c;与硬件紧密相关&#xff1b; 高级语言则接近自然语言&#xff0c;独立于具体硬件&#xff0c;需编译/解释才能运行&#xff1b; 中级语言并非严格分类&#xff0c;有时…...

编程新知 2026/5/8 6:29:46