0Pricing
Arduino & IoT Academy · 课时

托管网页更新页面

通过浏览器表单上传固件

托管网页更新页面 是 CoddyKit 上的免费 Arduino & IoT Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Arduino & IoT Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Arduino & IoT Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译,以英文显示。

Update From a Browser

Sometimes you want to flash a device without the Arduino IDE at all. A web update page lets anyone upload firmware from a browser.

The Board Becomes a Server

Your ESP32 runs a tiny web server that serves an upload form, so a phone or laptop can send it a new binary.

Bring In the Libraries

You combine a web server with the Update library, which knows how to write incoming bytes into flash memory.

#include <WebServer.h>
#include <Update.h>
WebServer server(80);

Serve an Upload Form

The root page returns a simple HTML form with a file picker and a submit button for the firmware file.

server.on("/", []() {
  server.send(200, "text/html",
    "<form method='POST' action='/update' enctype='multipart/form-data'><input type='file' name='fw'><input type='submit'></form>");
});

Where Did .bin Come From?

In the IDE, Sketch then Export Compiled Binary creates the .bin file you will pick in that upload form.

Open the Update Stream

When the upload starts, you tell the chip how big the image is so Update.begin() can reserve flash space for it.

Update.begin(UPDATE_SIZE_UNKNOWN);

Write the Incoming Chunks

Firmware arrives in pieces. You feed each chunk to Update.write() as it lands, building the new image in flash.

Update.write(upload.buf, upload.currentSize);

Finish and Verify

When the last byte arrives, Update.end(true) checks the image is complete and valid before marking it ready to boot.

if (Update.end(true)) Serial.println("Update OK");

Reboot Into New Code

A successful update needs a fresh start. Call ESP.restart() so the board boots into the firmware you just uploaded. 🔄

ESP.restart();

Guard the Page

Anyone who reaches this page can reflash your device, so add a login or token check before accepting any upload.

Keep the Server Alive

Just like OTA, the web server needs attention. Call server.handleClient() in loop so it can accept the upload request.

void loop() { server.handleClient(); }

Quick Check

Think about which library actually writes firmware to flash.

Recap

Run a web server that serves an upload form, feed the .bin to the Update library, verify it, then restart, all guarded behind a login. 🌐

常见问题解答

「托管网页更新页面」课时是免费的吗?

是的 — 「托管网页更新页面」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Arduino & IoT Academy 课程的其余内容,请升级到 CoddyKit PRO。 Arduino & IoT Academy 课程共包含 4 节课。

「托管网页更新页面」这节课中我会学到什么?

通过浏览器表单上传固件 你通过在浏览器中直接运行的动手代码来练习 Arduino & IoT Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Arduino & IoT Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Arduino & IoT Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。

「托管网页更新页面」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Arduino & IoT Academy 课中编写并运行代码吗?

能。每节 Arduino & IoT Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 为什么 OTA 对现场设备很重要
  2. 启用 ArduinoOTA
  3. 托管网页更新页面
  4. 回滚错误的更新
← 返回 Arduino & IoT Academy