沙井网站制作联系电话,做思维导图的资源网站,郑州艾特网站建设公司,物联网流量卡2023.11.20使用flask做一个简单图片浏览器
功能#xff1a; #xff08;1#xff09;输入指定路径#xff0c;打开文件夹 #xff08;2#xff09;判断文件格式为图片 #xff08;3#xff09;在前端进行预览 #xff08;4#xff09;使用bootstrap进行简单美化 ma…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, imagesimages, messagemessage)if __name__ __main__:app.run()index.html
!DOCTYPE html
html
headtitle图片预览/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js/scriptlink hrefhttps://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css relstylesheetscript srchttps://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js/scriptstyle.thumbnail {height: 150px;object-fit: contain;}/style
/head
bodydiv classcontainer mt-3h2图片预览/h2form methodPOST action/preview_imagesdiv classinput-group mb-3input typetext idfolderPath namefolder_path classform-control placeholder请输入文件夹路径button typesubmit classbtn btn-primary预览/button/div/form{% if images %}p{{ message }}/pdiv classrow row-cols-1 row-cols-md-3 g-4{% for image in images %}div classcoldiv classcardimg src{{ image }} classcard-img-top thumbnail alt...div classcard-bodybutton typebutton classbtn btn-primary onclickpreviewImage({{ image }})预览/button/div/div/div{% endfor %}/div{% else %}p{{ message }}/p{% endif %}/divscriptfunction previewImage(imageUrl) {window.open(imageUrl, _blank);}/script
/body
/html
