Flask 页面展示文件目录及文件,通过勾选复习框删除

这篇具有很好参考价值的文章主要介绍了Flask 页面展示文件目录及文件,通过勾选复习框删除。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(45条消息) flask 读取文件夹文件,展示在页面,可以通过勾选删除_U盘失踪了的博客-CSDN博客

基本实现

针对上面的功能再优化

项目结构 

Flask 页面展示文件目录及文件,通过勾选复习框删除,# Flask,flask,python

app.py

import os
import shutil
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

def generate_file_tree(path):
    root = {
        'name': os.path.basename(path),
        'type': 'directory',
        'children': []
    }
    for item in os.listdir(path):
        item_path = os.path.join(path, item)
        if os.path.isdir(item_path):
            child = generate_file_tree(item_path)
        else:
            child = {
                'name': item,
                'type': 'file'
            }
        root['children'].append(child)
    return root

def delete_selected_files_and_dirs(path, file_tree):
    selected_files = request.form.getlist('file-checkbox')
    for item in file_tree['children']:
        item_path = os.path.join(path, item['name'])
        if item['type'] == 'file':
            if item['name'] in selected_files:
                os.remove(item_path)
        elif item['type'] == 'directory':
            if item['name'] in selected_files:
                shutil.rmtree(item_path)
            else:
                delete_selected_files_and_dirs(item_path, item)

@app.route('/', methods=['GET', 'POST'])
def index():
    if not os.path.isdir('testfile'):
        os.makedirs('testfile')
    file_tree = generate_file_tree('testfile')
    if request.method == 'POST':
        delete_selected_files_and_dirs('testfile', file_tree)
        return redirect(url_for('index'))  # 重定向到相同的URL
    return render_template('index.html', file_tree=file_tree)

if __name__ == '__main__':
    app.run()

 templates / index.html

<!DOCTYPE html>
<html>
<head>
    <title>File Manager</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 10px;
        }

        h1 {
            text-align: center;
        }

        .file-tree {
            list-style: none;
            padding-left: 10px;
        }

        .file-tree .directory {
            margin-bottom: 10px;
        }

        .file-tree .file {
            list-style-type: none;
            margin-left: -25px;
        }

        .checkbox-label {
            display: inline-block;
            margin-right: 2px;
        }

        .delete-button {
            margin-top: 10px;
        }

        .file-tree li {
            position: relative;
            padding-left: 20px;
        }

        .file-tree li input[type="checkbox"] {
            position: absolute;
            right: 5; /* 将复选框放在右侧 */
            top: 0;
        }
    </style>
</head>
<body>
    <h1>File Manager</h1>
    <form method="POST" action="{{ url_for('index') }}">
        <ul class="file-tree">
            {% for item in file_tree['children'] %}
                {% if item['type'] == 'directory' %}
                    <li class="directory">
                        <label class="checkbox-label" for="{{ item['name'] }}"> {{ item['name'] }}</label>
                        <input type="checkbox" name="file-checkbox" value="{{ item['name'] }}" id="{{ item['name'] }}">
                        <ul>
                            {% for child in item['children'] %}
                                {% if child['type'] == 'file' %}
                                    <li class="file">
                                        <label class="checkbox-label" for="{{ child['name'] }}">{{ child['name'] }}</label>
                                        <input type="checkbox" name="file-checkbox" value="{{ child['name'] }}" id="{{ child['name'] }}">
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
        <button type="submit" class="delete-button">Delete Selected Files</button>
    </form>
</body>
</html>

效果图

Flask 页面展示文件目录及文件,通过勾选复习框删除,# Flask,flask,python

 Flask 页面展示文件目录及文件,通过勾选复习框删除,# Flask,flask,python

优化一

目录折叠/展开文件

<!DOCTYPE html>
<html>
<head>
    <title>File Manager</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            text-align: center;
        }

        .file-tree {
            list-style: none;
            padding-left: 20px;
        }

        .file-tree .directory {
            margin-bottom: 5px;
        }

        .file-tree .file {
            list-style-type: none;
            margin-left: 20px;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
        }

        .checkbox-label input[type="checkbox"] {
            margin-right: 5px;
        }

        .delete-button {
            margin-top: 10px;
        }

        .file-tree li {
            position: relative;
            padding-left: 20px;
        }

        .file-tree .directory > .file-tree {
            display: none;
        }

        .file-tree .directory.open > .file-tree {
            display: block;
        }

        .file-tree .directory > .checkbox-label::before {
            content: "+";
            display: inline-block;
            width: 10px;
            text-align: center;
            cursor: pointer;
        }

        .file-tree .directory.open > .checkbox-label::before {
            content: "-";
        }

        /* 新增的样式 */
        .file-tree .directory .checkbox-label {
            position: relative;
            left: -20px;
        }

        .file-tree .directory .checkbox-label input[type="checkbox"] {
            margin-right: 5px;
        }

        .file-tree .directory:not(.open) .checkbox-label input[type="checkbox"] {
            pointer-events: none;
        }
    </style>
    <script>
window.addEventListener('DOMContentLoaded', (event) => {
    const directories = document.querySelectorAll('.directory');
    directories.forEach(directory => {
        const checkboxLabel = directory.querySelector('.checkbox-label');
        const checkbox = directory.querySelector('input[type="checkbox"]');

        checkbox.addEventListener('click', (event) => {
            event.stopPropagation();
        });

        checkboxLabel.addEventListener('click', (event) => {
            if (!event.target.matches('input[type="checkbox"]')) {
                directory.classList.toggle('open');
                if (!directory.classList.contains('open')) {
                    checkbox.checked = false;
                }
            }
        });

        directory.addEventListener('click', () => {
            if (!directory.classList.contains('open')) {
                checkbox.checked = false;
            }
        });

        directory.addEventListener('transitionend', () => {
            if (directory.classList.contains('open')) {
                checkbox.disabled = false;
            } else {
                checkbox.disabled = true;
            }
        });
    });
});




    </script>
</head>
<body>
    <h1>File Manager</h1>
    <form method="POST" action="{{ url_for('index') }}">
        <ul class="file-tree">
            {% for item in file_tree['children'] %}
                {% if item['type'] == 'directory' %}
                    <li class="directory">
                        <label class="checkbox-label">
                            <input type="checkbox" name="file-checkbox" value="{{ item['name'] }}" id="{{ item['name'] }}">
                            {{ item['name'] }}
                        </label>
                        <ul class="file-tree">
                            {% for child in item['children'] %}
                                {% if child['type'] == 'file' %}
                                    <li class="file">
                                        <label class="checkbox-label">
                                            <input type="checkbox" name="file-checkbox" value="{{ child['name'] }}" id="{{ child['name'] }}">
                                            {{ child['name'] }}
                                        </label>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
        <button type="submit" class="delete-button">Delete Selected Files</button>
    </form>
</body>
</html>

Flask 页面展示文件目录及文件,通过勾选复习框删除,# Flask,flask,python

优化二

隐藏目录的复选框

<!DOCTYPE html>
<html>
<head>
    <title>File Manager</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            text-align: center;
        }

        .file-tree {
            list-style: none;
            padding-left: 20px;
        }

        .file-tree .directory {
            margin-bottom: 5px;
        }

        .file-tree .file {
            list-style-type: none;
            margin-left: 20px;
        }

        .delete-button {
            margin-top: 10px;
        }

        .file-tree li {
            position: relative;
            padding-left: 20px;
        }

        .file-tree .directory > .file-tree {
            display: none;
        }

        .file-tree .directory.open > .file-tree {
            display: block;
        }

        .file-tree .directory > .checkbox-label::before {
            content: "+";
            display: inline-block;
            width: 10px;
            text-align: center;
            cursor: pointer;
        }

        .file-tree .directory.open > .checkbox-label::before {
            content: "-";
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', (event) => {
            const directories = document.querySelectorAll('.directory');
            directories.forEach(directory => {
                const checkboxLabel = directory.querySelector('.checkbox-label');

                checkboxLabel.addEventListener('click', (event) => {
                    directory.classList.toggle('open');
                    event.stopPropagation();
                });

                directory.addEventListener('click', () => {
                    if (!directory.classList.contains('open')) {
                        directory.classList.add('open');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h1>File Manager</h1>
    <form method="POST" action="{{ url_for('index') }}">
        <ul class="file-tree">
            {% for item in file_tree['children'] %}
                {% if item['type'] == 'directory' %}
                    <li class="directory">
                        <label class="checkbox-label">
                            {{ item['name'] }}
                        </label>
                        <ul class="file-tree">
                            {% for child in item['children'] %}
                                {% if child['type'] == 'file' %}
                                    <li class="file">
                                        <label class="checkbox-label">
                                            <input type="checkbox" name="file-checkbox" value="{{ child['name'] }}" id="{{ child['name'] }}">
                                            {{ child['name'] }}
                                        </label>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
        <button type="submit" class="delete-button">Delete Selected Files</button>
    </form>
</body>
</html>

Flask 页面展示文件目录及文件,通过勾选复习框删除,# Flask,flask,python

 文章来源地址https://www.toymoban.com/news/detail-599775.html

到了这里,关于Flask 页面展示文件目录及文件,通过勾选复习框删除的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Linux :: 【基础指令篇 :: 文件及目录操作:(6)】:: rmidr / rm:删除空目录、删除非空目录及删除文件指令

    前言:本篇是 Linux 基本操作篇章的内容! 笔者使用的环境是基于腾讯云服务器:CentOS 7.6 64bit。 学习集: C++ 入门到入土!!!学习合集 Linux 从命令到网络再到内核!学习合集 目录索引: 1. rmdir / rm 基本语法及功能 2. rmdir 基本使用测试 (看操作代码) - - 2.1 创建一个空目录

    2024年02月05日
    浏览(48)
  • 【python】flask模板渲染引擎Jinja2,通过后端数据渲染前端页面

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN新星创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开

    2024年04月11日
    浏览(57)
  • elementUI+el-upload 上传、下载、删除文件以及文件展示列表自定义为表格展示

    官方文档 https://element.eleme.cn/#/zh-CN/component/upload 具体参数说明,如何实现上传、下载、删除等功能 action :文件上传地址,我的项目里已经封装好了请求。使用的时候需要依据项目填写。 show-file-list : 是否显示已上传文件列表。 headers :设置上传的请求头部。我的项目需要传

    2024年01月20日
    浏览(58)
  • rm命令——删除文件或目录

    rm命令是英文单词remove的缩写,主要功能是删除文件或目录。 因为删除文件是一个破坏性动作,因此,在使用时需要格外小心,在执行之前一定要再三确认删除的是哪个目录中的什么文件。 rm命令的语法格式如下: 常用选项如下: 选项 作用或含义 -f 强制删除,且不提示确认

    2024年02月02日
    浏览(55)
  • Linux文件管理(文件/目录的创建、更改、删除)

    1.严格区分大小写 2.文件命名不能使用字符\\\"/\\\" 3.目录或文件名的长度不能超过255个字符 建议: (1)文件名由两个或两个以上单词组成时,尽量使用\\\"_\\\"来代替space键 (2)尽量不用字母的大小写来区分文件或者目录 4.Linux的文件扩展名在Linux的操作系统中没有意义。换句话说,

    2024年02月07日
    浏览(91)
  • 051-WEB攻防-前后台功能点&文件下载&文件读取&文件删除&目录遍历&目录穿越

    1、文件安全-前后台功能点-下载读取删除 2、目录安全-前后台功能点-目录遍历目录穿越 演示案例: ➢文件安全-下载删除-案例黑白盒 ➢目录安全-遍历穿越-案例黑白盒 1、下载=读取(获取源码) 文件下载 利用:下载敏感文件(数据库配置,中间件配置,系统密匙等文件信息

    2024年03月10日
    浏览(64)
  • Flask 上传文件,requests通过接口上传文件

    这是一个使用 Flask 框架实现文件上传功能的示例代码。该代码定义了两个路由: /upload :处理文件上传请求。在该路由中,我们首先从请求中获取上传的文件,然后将文件保存到本地磁盘上,并返回一个字符串表示上传成功。 / :返回一个 HTML 表单,用于选择文件并提交上传

    2024年02月08日
    浏览(37)
  • Linux定时删除指定目录下文件

    1,例如删除root/tmp下的所有缓存文件,tmp 及下面的所有文件与文件夹都删除后,再重新建立tmp文件夹 /root/tmp 2,给文件赋予执行权限 3,添加Linux中的定时任务, 查看crontab 任务 https://www.cnblogs.com/mr-wuxiansheng/p/14433304.html?ivk_sa=1024320u

    2024年02月16日
    浏览(54)
  • Linux rm命令:删除文件或目录

    当 Linux 系统使用很长时间之后,可能会有一些已经没用的文件(即垃圾),这些文件不但会消耗宝贵的硬盘资源,还是降低系统的运行效率,因此需要及时地清理。 rm 是强大的删除命令,它可以永久性地删除文件系统中指定的文件或目录。在使用 rm 命令删除文件或目录时,

    2024年02月07日
    浏览(56)
  • Linux修改目录文件的属主(属组)命令、设置宿主目录并删除原来宿主目录

    1.属主(属组)的目的: 2.属主(属组)的用处: 3.修改属主和属组的用途: 1. 权限控制: 2. 用户管理: 3. 文件管理: 4.修改目录或文件的属主和属组的命令: 1. chown命令: 2. chgrp命令: 5.设置宿主目录并删除原来宿主目录: 1.设置宿主目录的原因: 1. 数据持久性: 2. 共享数

    2024年02月09日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包