监控文件的网页工具

欢迎访问我的个人博客：我心永恒

想开发个小工具，供工作使用，大概思路是这样：做一个网页，里面有一个文本框，一个上传按钮，一个下拉框。点击上传按钮，从本地选择txt文本，在下拉框设置自动刷新的时间（实时、1分钟、10分钟），本地文本就会自动上传到文本框里。

实现：

前端html文件如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script type="text/javascript" src="/static/js/jquery-3.6.0.min.js"></script>
</head>


<body>

<script>

    let job;

    function filePathBlur(e) {
        console.log("filePathBlur")

        triggerRead()
    }

    function refreshIntervalChange(e) {
        console.log("refreshIntervalChange")

        triggerRead()
    }

    function triggerRead() {

        if (job) {
            clearInterval(job)
        }

        let filePath = document.getElementById('file_path').value
        let refreshInterval = parseInt(document.getElementById('refresh_interval').value)

        if (!filePath) {
            console.log("未填入文件路径")
        }

        job = setInterval(() => {
            console.log(filePath)

            $.ajax({
                url: "/read-file",
                type: "GET",
                data: {
                    filePath: filePath
                },
                success: function (result) {
                    console.log(result)
                    if (result.success) {
                        $("#file_content").val(result.content)
                    } else {
                        alert(result.message)
                        clearInterval(job)
                    }
                }
            });

        }, refreshInterval * 1000)
    }

</script>

<div style=" 1000px; padding: 15px; margin: 0 auto">
    <h1>文件内容监控工具</h1>


    <div style="margin-top: 10px;">
        <label for="file_path">请选择要监控的文件：</label>
        <input onblur="filePathBlur()" type="text" name="file_path" id="file_path"/>
    </div>


    <div style="margin-top: 10px;">
        <label for="refresh_interval">请选择刷新时间: </label>
        <select onchange="refreshIntervalChange()" id="refresh_interval" name="refresh_interval" autofocus>
            <option value="1">realtime</option>
            <option value="60">1分钟</option>
            <option value="300">5分钟</option>
            <option value="600">10分钟</option>
        </select>
    </div>

    <div style="margin-top: 50px;">
        <textarea id="file_content" cols="100" rows="60"></textarea>
    </div>

</div>

</body>
</html>

项目源码：FileContentMonitorTool

欢迎访问我的个人博客：我心永恒

原文地址：监控文件的网页工具