<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<title>固件升级</title>
</head>
<body>
<h2>固件升级</h2>
<hr>
<a href="http://192.168.4.1" style="font-size: smaller;">[返回首页]</a><br><br>
<!-- 选择文本按钮 -->
<label for="newFile">加载文件：</label>
<input id="newFile" type="file" accept=".bin" onchange="checkFile()">
<br><br>
<!-- 上传操作 -->
<label for="otaStart">执行操作：</label>
<button id="otaStart" type="button" onclick="otaStart()">开始升级</button>
<button id="reload" type="button" onclick="reload()">刷新界面</button>
<br><br>
<!-- 进度显示 -->
<label for="otaPercent">进度显示：</label>
<input id="otaPercent" type="text" value="0.00%" style="width: 75px;border: none;font-size:large;">
<progress id="otaProgress" value="0" max="100"></progress>
<br><br><hr>
<p id="viewName"></p>
<p id="viewSize"></p>
<p id="viewFlashStart"></p>
<p id="viewFlashResult"></p>
<script>
function reload() {
location.reload();
}
function getFileSize(size) {
if (!size) return "";
var num = 1024.00;
if (size < num) {
return size + "B";
}
if (size < Math.pow(num, 2)) {
return (size / num).toFixed(2) + "KB";
}
if (size < Math.pow(num, 3)) {
return (size / Math.pow(num, 2)).toFixed(2) + "MB";
}
}
function checkFile() {
var newFile = document.getElementById("newFile").files[0];
var newFileName = newFile.name;
var newFileSize = newFile.size;
if (newFileSize > 2 * 1024 * 1024) {
alert('所选文件超出最大限制\n点击确定后将自动刷新页面');
location.reload();
}
else {
document.getElementById("viewName").innerHTML = "文件名称：" + newFileName;
document.getElementById("viewSize").innerHTML = "文件大小：" + getFileSize(newFileSize);
}
}
function otaStart() {
var res = document.getElementById("newFile").files[0];
if (typeof (res) == "undefined") {
alert('未选择文件!');
}
else {
var filepath = document.getElementById("newFile").files[0].name;
var upload_path = "/ota/" + filepath;
document.getElementById("viewFlashStart").innerHTML = "锁定页面，请务必保持WiFi在线，正在上传...";
document.getElementById("newFile").disabled = true;
document.getElementById("otaStart").disabled = true;
var file = document.getElementById("newFile").files[0];
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
document.getElementById("viewFlashResult").innerHTML = "上传成功！";
} else if (xhttp.status == 0) {
document.getElementById("viewFlashResult").innerHTML = "服务器断开！<br><br>请检查服务器是否在线，刷新页面后重新上传...";
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
}
}
};
let progressBar = document.getElementById("otaProgress");
xhttp.upload.onprogress = function (e) {
var percentage = (event.loaded * 100.00) / (event.total * 1.00);
percentage = percentage.toFixed(2);
progressBar.value = Math.round(percentage);
document.getElementById("otaPercent").value = percentage + "%";
}
xhttp.open("POST", upload_path, true);
xhttp.send(file);
}
}
</script>
</body>
</html>