在 Flask 中实现多张图片上传并同时显示

在 flask 中实现多张图片上传并同时显示

在 Flask 应用中实现多张图片上传并同时显示的功能,关键在于正确管理每个上传文件的状态,避免覆盖。以下将详细介绍如何通过结合 Flask 的 session 功能,简化 Python 代码和 HTML 模板,使得多个图片可以独立上传和显示。

使用 Flask Session 管理图片

Flask 的 session 对象允许你在用户会话期间存储数据。这非常适合用于保存上传文件的信息,以便在后续请求中访问。

1. 安装 Flask Session

首先,确保你已经安装了 Flask Session:

pip install Flask-Session

2. 配置 Flask Session

在你的 Flask 应用中,配置 session:

from flask import Flask, render_template, request, redirect, url_for, flash, sessionfrom flask_session import Sessionimport osfrom werkzeug.utils import secure_filenameapp = Flask(__name__)app.config['SECRET_KEY'] = 'your_secret_key'  # 替换为你自己的密钥app.config['UPLOAD_FOLDER'] = 'static/uploads'app.config["SESSION_PERMANENT"] = Falseapp.config["SESSION_TYPE"] = "filesystem"Session(app)ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}def allowed_file(filename):    return '.' in filename and            filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS@app.route('/')def home():    return render_template('index.html')@app.route('/', methods=['POST'])def upload_content():    if not any(f in ['content_file', 'style_file'] for f in request.files):        flash('No file part')        return redirect(request.url)    submitted_file = 'content_file' if 'content_file' in request.files else 'style_file'    file = request.files[submitted_file]    if file.filename == '':        flash('No image selected for uploading')        return redirect(request.url)    if file and allowed_file(file.filename):        filename = secure_filename(file.filename)        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))        session[submitted_file] = filename        print('upload_image filename: ' + filename, os.path.join(app.config['UPLOAD_FOLDER'], filename))        flash('Image successfully uploaded and displayed below')        return render_template('index.html')    else:        flash('Allowed image types are - png, jpg, jpeg, gif')        return redirect(request.url)@app.route('/display/')def display_image(filename):    return redirect(url_for('static', filename='uploads/' + filename), code=301)if __name__ == '__main__':    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True) # Ensure upload folder exists    app.run(debug=True)

代码解释:

app.config[‘SECRET_KEY’]: 设置一个安全的密钥,用于加密 session 数据。请务必更换为你自己的密钥。app.config[‘UPLOAD_FOLDER’]: 指定上传文件保存的目录。Session(app): 初始化 Flask Session。upload_content() 函数:检查请求中是否包含 content_file 或 style_file。根据上传的文件类型,将其保存在 session 中。

3. 修改 HTML 模板

修改你的 HTML 模板(例如 index.html)以显示多个图片,并使用 session 中存储的文件名:

Select a content image to upload

{% with messages = get_flashed_messages() %} {% if messages %}

    {% for message in messages %}
  • {{ message }}
  • {% endfor %}
{% endif %} {% endwith %}

{% if session['content_file'] %} @@##@@ {% endif %}

Select a style image to upload

{% with messages = get_flashed_messages() %} {% if messages %}

    {% for message in messages %}
  • {{ message }}
  • {% endfor %}
{% endif %} {% endwith %}

{% if session['style_file'] %} @@##@@ {% endif %}

代码解释:

{% if session[‘content_file’] %} 和 {% if session[‘style_file’] %}: 检查 session 中是否存在相应的文件名,如果存在,则显示图片。 和 : 为每个文件上传字段使用不同的 name 属性。

总结

通过使用 Flask 的 session 功能,可以轻松地管理多个上传文件的状态,并在 HTML 模板中同时显示它们。这种方法避免了覆盖之前上传的文件,并且简化了代码结构。记住,为了安全起见,务必设置一个安全的 SECRET_KEY。此外,请确保在运行应用前创建 UPLOAD_FOLDER 目录。

在 Flask 中实现多张图片上传并同时显示在 Flask 中实现多张图片上传并同时显示

以上就是在 Flask 中实现多张图片上传并同时显示的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1574559.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月22日 16:24:59
下一篇 2025年12月22日 16:25:15

相关推荐

  • 本地开发Bootstrap组件:VS Code中引入CDN的正确姿势

    在VS Code等本地开发环境中,Bootstrap组件无法正常工作,而在线编译器却能运行,其核心原因在于本地环境缺少对Bootstrap CSS和JavaScript文件的显式引用。本文将详细阐述这一问题根源,并提供通过CDN正确引入Bootstrap资源的方法,确保本地开发环境中的Bootstr…

    2025年12月22日
    000
  • 利用AJAX技术实现表格行级操作:动态接受与拒绝请求

    本文探讨了在Web表单中处理表格行级操作(如接受/拒绝请求)的正确方法。针对直接在客户端PHP中定义$_POST变量的常见误区,文章推荐使用AJAX技术,通过JavaScript的fetch API异步发送请求,并详细展示了如何构建HTML结构、编写JavaScript逻辑以及构思服务器端处理,以实…

    2025年12月22日
    000
  • PHP表格数据处理:避免直接定义$_POST,采用AJAX优化交互

    本文旨在解决在PHP表格中处理行级操作时,错误地尝试在客户端PHP代码中定义$_POST变量的问题。我们将深入探讨这种做法的局限性,并提供一种现代且高效的解决方案:利用JavaScript的AJAX(fetch API)技术,实现无需页面刷新的动态数据提交与处理,从而优化用户体验并确保数据传输的正确…

    2025年12月22日
    000
  • PHP动态数据交互:通过AJAX优化表单提交与数据库操作

    本文探讨了在Web应用中高效处理动态数据更新的方法,特别是针对表格中“接受”或“拒绝”操作。通过分析传统表单提交的局限性,我们推荐使用AJAX技术实现异步请求,从而避免页面刷新,提升用户体验。教程将详细演示如何利用HTML5 data-*属性和JavaScript fetch API,将操作类型和数…

    2025年12月22日
    000
  • 解决PHP页面加载时HTML Body内容不显示的问题

    本文旨在解决PHP应用中常见的HTML 内容为空的问题。核心在于理解PHP代码的执行与HTML内容输出的机制。当PHP逻辑与HTML结构分离,且PHP文件未明确输出内容时,可能导致页面空白。解决方案通常是将PHP逻辑直接嵌入到生成HTML的页面中,或通过模板机制确保数据被正确渲染到HTML结构内。 …

    2025年12月22日
    000
  • JavaScript动态下拉菜单:实现日期选项与价格计算关联

    在现代web应用中,动态生成表单元素并使其具备交互逻辑是常见的需求。特别是在需要根据用户选择调整价格或服务参数的场景下,下拉菜单()常被用来展示一系列选项。本教程将指导您如何利用javascript动态生成一个包含日期选项的下拉菜单,并为每个选项关联一个具体的数值(如剩余天数),进而实现一个基于用户…

    2025年12月22日
    000
  • VS Code HTML 自动补全使用单引号:Prettier 配置指南

    本教程旨在解决VS Code中HTML自动补全(如img+Tab)默认使用双引号的问题。即使修改了VS Code内置设置,该问题仍可能存在。文章将详细指导如何通过安装并配置Prettier扩展,强制HTML属性值在保存时统一使用单引号,从而实现代码风格的一致性。 挑战:vs code html 自动…

    2025年12月22日
    000
  • JavaScript动态下拉列表值与价格计算集成指南

    本教程详细阐述如何在JavaScript动态生成的下拉列表中嵌入数值,并利用这些数值实现基于用户选择的复杂价格计算逻辑。通过修改数据结构、优化DOM操作以及引入事件监听器,我们将展示如何将天数等关键数据与下拉选项关联,并根据这些数据实时调整价格因子,从而构建一个功能完善的交互式价格计算器。 动态下拉…

    2025年12月22日
    000
  • JavaScript动态下拉列表值与价格计算器集成指南

    本文详细介绍了如何利用JavaScript动态生成包含日期信息的下拉列表选项,并为每个选项嵌入数值(如天数),从而实现基于用户选择的实时价格计算功能。通过修改选项的生成方式并结合事件监听器,开发者可以构建出交互式且功能强大的表单元素。 动态生成带值的下拉列表选项 在许多web应用中,我们需要根据特定…

    2025年12月22日
    000
  • 使用 Prettier 在 VS Code 中配置 HTML 自动补全使用单引号

    本文介绍如何在 VS Code 中配置 HTML 自动补全,使其在生成 HTML 标签属性时默认使用单引号而不是双引号。通过安装并配置 Prettier 插件,可以轻松实现这一需求,并统一代码风格。 在使用 VS Code 进行 HTML 开发时,默认的自动补全行为可能会生成使用双引号的属性值,例如…

    2025年12月22日
    000
  • JavaScript 动态下拉列表与价格计算联动:实现选项值绑定与事件处理

    本教程将指导您如何在JavaScript动态生成的下拉列表中,为每个选项绑定可用于价格计算的数值(例如天数)。通过改造数据结构、将数值嵌入option的value属性,并利用change事件监听器,实现根据用户选择动态调整价格计算因子的功能,提升前端交互的实用性。 1. 理解需求与原始问题分析 在w…

    2025年12月22日
    000
  • 优化 VS Code HTML 自动补全:实现单引号属性值

    本文旨在解决VS Code中HTML标签自动补全(如img+Tab)默认使用双引号的问题,并提供一种有效的方法来实现单引号属性值。虽然VS Code自带的html.completion.attributeDefaultValue设置对初始标签补全无效,但通过引入和配置流行的代码格式化工具Pretti…

    2025年12月22日
    000
  • VS Code HTML自动补全:使用单引号替代双引号

    本文旨在解决VS Code中HTML标签自动补全时,默认使用双引号的问题,并提供一种通过配置Prettier插件,将自动补全的引号设置为单引号的有效方法。通过本文,你将学会如何自定义VS Code的HTML代码风格,提升开发效率。 在使用VS Code进行HTML开发时,自动补全功能可以显著提高效率…

    2025年12月22日
    000
  • CSS教程:调整Font Awesome图标大小的实用技巧

    本教程将指导您如何通过CSS的font-size属性来调整HTML中Font Awesome图标的大小。无论是通过内联样式还是外部/内部样式表,您都可以灵活控制图标的视觉呈现,以适应您的设计需求。 在网页设计中,font awesome图标因其矢量特性和易用性而广受欢迎。这些图标本质上是字体,因此,…

    2025年12月22日
    000
  • HTML/CSS Font Awesome 图标尺寸调整指南

    本文将详细介绍如何在HTML中调整Font Awesome图标的大小。核心方法是利用CSS的font-size属性,无论是通过行内样式直接设置,还是通过外部/内部CSS样式表进行统一管理,都能有效实现图标尺寸的灵活控制,以满足设计需求和提升用户体验。 理解Font Awesome图标的本质 在使用f…

    2025年12月22日
    000
  • 创建可重置输入框的清除按钮:JavaScript 实现

    本文将介绍如何使用 JavaScript 为输入框创建一个清除按钮,该按钮能够在输入框有内容时显示,点击后清除输入框内容并隐藏自身。我们将提供详细的代码示例,并解释如何实现这一功能,以及需要注意的关键点,确保即使在没有 JavaScript 支持的情况下也能提供基本的用户体验。 实现步骤 HTML …

    2025年12月22日
    000
  • JavaScript中模拟点击事件的有效方法与实践

    本文旨在深入探讨在JavaScript中通过编程方式模拟HTML按钮点击事件的多种有效方法。我们将详细介绍使用原生JavaScript的click()方法、更可靠的dispatchEvent机制,以及jQuery库提供的简洁方案,并提供实际代码示例和应用注意事项,帮助开发者准确触发元素交互。 简介 …

    2025年12月22日
    000
  • 如何永久启用网页文本选择功能:通过用户样式表覆盖 user-select 属性

    本教程将指导您如何通过浏览器扩展(如Stylish或Stylus)使用用户样式表,永久覆盖网站的 user-select: none CSS属性,从而在不允许复制文本的网页上启用文本选择功能,尤其适用于需要复制代码片段的学习者和开发者。 理解 user-select 属性及其影响 在网页开发中,cs…

    2025年12月22日
    000
  • JavaScript中程序化触发按钮点击事件的教程

    本文详细介绍了在JavaScript中如何通过编程方式触发HTML按钮的点击事件。教程涵盖了两种主要方法:使用原生JavaScript的dispatchEvent方法模拟事件,以及利用jQuery库提供的简洁click()方法,并提供了相应的代码示例和注意事项,帮助开发者选择最适合其项目需求的技术。…

    2025年12月22日
    000
  • JavaScript中模拟按钮点击事件的策略与实践

    本文探讨了在JavaScript中以编程方式触发HTML按钮点击事件的多种方法。从基础的element.click()到更强大的dispatchEvent机制,以及jQuery提供的简洁方案,文章详细介绍了各种方法的适用场景、潜在限制及最佳实践,旨在帮助开发者选择最适合其需求的模拟点击策略。 在We…

    2025年12月22日
    000

发表回复

登录后才能评论
关注微信