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

网页固件升级界面设计

article 2025/1/21 7:10:30

1. 代码

<!DOCTYPE html>
<html>
<head>
    <title>本地固件升级</title>
    <style>
        .L1_tab-content {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            text-align: center;
        }
        h2 {
            margin-bottom: 20px;
        }
        input[type="file"] {
            margin-bottom: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        progress {
            width: 100%;
            height: 20px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="L1_tab-content">
        <h2>本地固件升级</h2>
        <input type="file" id="firmwareFile"><br>
        <button onclick="startUpgrade()">升级</button>
        <progress id="upgradeProgress" value="0" max="100"></progress>
    </div>

    <script>
        function startUpgrade() {
            const fileInput = document.getElementById('firmwareFile');
            const file = fileInput.files[0];
            if (!file) {
                alert("请先选择固件文件！");
                return;
            }

            const reader = new FileReader();

            reader.onload = function(event) {
                const fileData = event.target.result;
                const chunkSize = 1024; // 每次发送1KB
                const ip = '192.168.1.100'; // ESP8266的IP地址
                const port = 12345; // ESP8266的TCP端口

                const socket = new WebSocket(`ws://${ip}:${port}`);

                socket.onopen = () => {
                    let offset = 0;
                    const totalSize = fileData.byteLength;

                    function sendNextChunk() {
                        if (offset < totalSize) {
                            const chunk = fileData.slice(offset, offset + chunkSize);
                            socket.send(chunk);
                            offset += chunkSize;

                            // 更新进度条
                            const progress = Math.round((offset / totalSize) * 100);
                            document.getElementById('upgradeProgress').value = progress;

                            // 继续发送下一个块
                            setTimeout(sendNextChunk, 10); // 添加延迟以避免阻塞
                        } else {
                            socket.close();
                        }
                    }

                    // 开始发送第一个块
                    sendNextChunk();
                };

                socket.onmessage = (event) => {
                    console.log('Received:', event.data);
                };

                socket.onclose = () => {
                    console.log('升级完成');
                    alert('固件升级完成！');
                    document.getElementById('upgradeProgress').value = 0; // 重置进度条
                };
            };

            reader.readAsArrayBuffer(file);
        }
    </script>
</body>
</html>