Skip to content

Commit f3b7477

Browse files
author
Your Name
committed
优化了web端iOS Safari按钮的一些逻辑，现在可以看到文件ota上传进度条了
1 parent dfa8b1c commit f3b7477

File tree

1 file changed

+63
-40
lines changed

1 file changed

+63
-40
lines changed

‎TC1/http_server/web/index.html‎

Lines changed: 63 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
3232
<header class="demo-header mdl-layout__header">
3333
<div class="mdl-layout__header-row">
34-
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-device-name">
34+
<button class="mdl-button mdl-button--icon edit-device-name">
3535
<i class="material-icons">
3636
<svg>
3737
<use xlink:href="#icon-edit"/>
@@ -40,7 +40,7 @@
4040
</button>
4141
<span class="mdl-layout-title">TC1智能插座</span>
4242
<div class="mdl-layout-spacer"></div>
43-
<!-- <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button&#45;&#45;icon"-->
43+
<!-- <button class="mdl-button mdl-button&#45;&#45;icon"-->
4444
<!-- id="hdrbtn">-->
4545
<!-- <i class="material-icons">-->
4646
<!-- <svg>-->
@@ -55,7 +55,7 @@
5555
<!-- <li class="mdl-menu__item" onclick="ChangeLanguage('jp')">日本語</li>-->
5656
<!-- </ul>-->
5757
<button onclick="reboot()"
58-
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
58+
class="mdl-button mdl-button--icon"
5959
id="rebootbtn">
6060
<i class="material-icons">
6161
<svg>
@@ -176,7 +176,7 @@ <h2 class="mdl-card__title-text">插座控制</h2>
176176
</li>
177177
<li class="mdl-list__item">
178178
<span class="mdl-list__item-primary-content">
179-
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
179+
<button class="mdl-button mdl-button--icon edit-socket-name">
180180
<i class="material-icons">
181181
<svg>
182182
<use xlink:href="#icon-edit"/>
@@ -195,7 +195,7 @@ <h2 class="mdl-card__title-text">插座控制</h2>
195195
</li>
196196
<li class="mdl-list__item">
197197
<span class="mdl-list__item-primary-content">
198-
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
198+
<button class="mdl-button mdl-button--icon edit-socket-name">
199199
<i class="material-icons">
200200
<svg>
201201
<use xlink:href="#icon-edit"/>
@@ -214,7 +214,7 @@ <h2 class="mdl-card__title-text">插座控制</h2>
214214
</li>
215215
<li class="mdl-list__item">
216216
<span class="mdl-list__item-primary-content">
217-
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
217+
<button class="mdl-button mdl-button--icon edit-socket-name">
218218
<i class="material-icons">
219219
<svg>
220220
<use xlink:href="#icon-edit"/>
@@ -233,7 +233,7 @@ <h2 class="mdl-card__title-text">插座控制</h2>
233233
</li>
234234
<li class="mdl-list__item">
235235
<span class="mdl-list__item-primary-content">
236-
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
236+
<button class="mdl-button mdl-button--icon edit-socket-name">
237237
<i class="material-icons">
238238
<svg>
239239
<use xlink:href="#icon-edit"/>
@@ -252,7 +252,7 @@ <h2 class="mdl-card__title-text">插座控制</h2>
252252
</li>
253253
<li class="mdl-list__item">
254254
<span class="mdl-list__item-primary-content">
255-
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
255+
<button class="mdl-button mdl-button--icon edit-socket-name">
256256
<i class="material-icons">
257257
<svg>
258258
<use xlink:href="#icon-edit"/>
@@ -271,7 +271,7 @@ <h2 class="mdl-card__title-text">插座控制</h2>
271271
</li>
272272
<li class="mdl-list__item">
273273
<span class="mdl-list__item-primary-content">
274-
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
274+
<button class="mdl-button mdl-button--icon edit-socket-name">
275275
<i class="material-icons">
276276
<svg>
277277
<use xlink:href="#icon-edit"/>
@@ -368,10 +368,10 @@ <h2 class="mdl-card__title-text">网络设置</h2>
368368
</form>
369369
</div>
370370
<div class="mdl-card__actions mdl-card--border">
371-
<a id="wifi_submit"
372-
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
371+
<button type="button" id="wifi_submit"
372+
class="mdl-button mdl-button--colored ">
373373
提交
374-
</a>
374+
</button>
375375
</div>
376376
</div>
377377

@@ -401,10 +401,10 @@ <h2 class="mdl-card__title-text">MQTT 设置</h2>
401401
</form>
402402
</div>
403403
<div class="mdl-card__actions mdl-card--border">
404-
<a id="mqtt_submit"
405-
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
404+
<button type="button" id="mqtt_submit"
405+
class="mdl-button mdl-button--colored ">
406406
提交
407-
</a>
407+
</button>
408408
</div>
409409
</div>
410410

@@ -422,10 +422,10 @@ <h2 class="mdl-card__title-text">MQTT 功率上报设置</h2>
422422
</form>
423423
</div>
424424
<div class="mdl-card__actions mdl-card--border">
425-
<a id="mqtt_freq_submit"
426-
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
425+
<button type="button" id="mqtt_freq_submit"
426+
class="mdl-button mdl-button--colored ">
427427
提交
428-
</a>
428+
</button>
429429
</div>
430430
</div>
431431

@@ -519,10 +519,10 @@ <h2 class="mdl-card__title-text">添加任务</h2>
519519
</form>
520520
</div>
521521
<div class="mdl-card__actions mdl-card--border">
522-
<a href="javascript:AddTimedTask();"
523-
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
522+
<button type="button" onclick="AddTimedTask();"
523+
class="mdl-button mdl-button--colored ">
524524
提交
525-
</a>
525+
</button>
526526
</div>
527527
</div>
528528

@@ -598,10 +598,10 @@ <h2 class="mdl-card__title-text">添加按键操作</h2>
598598
</form>
599599
</div>
600600
<div class="mdl-card__actions mdl-card--border">
601-
<a href="javascript:addButtonEvent();"
602-
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
601+
<button type="button" onclick="addButtonEvent();"
602+
class="mdl-button mdl-button--colored ">
603603
添加
604-
</a>
604+
</button>
605605
</div>
606606
</div>
607607

@@ -655,10 +655,10 @@ <h2 class="mdl-card__title-text">在线升级</h2>
655655
</form>
656656
</div>
657657
<div class="mdl-card__actions mdl-card--border">
658-
<a href="javascript:OtaStart();"
659-
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
658+
<button type="button" onclick="OtaStart();" id="submit-ota-link"
659+
class="mdl-button mdl-button--colored ">
660660
提交
661-
</a>
661+
</button>
662662
</div>
663663
<div id="ota_status" class="mdl-progress mdl-js-progress"></div>
664664
</div>
@@ -675,10 +675,11 @@ <h2 class="mdl-card__title-text">本地升级</h2>
675675
</form>
676676
</div>
677677
<div class="mdl-card__actions mdl-card--border">
678-
<a href="javascript:OtaFileUpload();" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
678+
<button type="button" onclick="OtaFileUpload();" class="mdl-button mdl-button--colored " id="submit-ota-file">
679679
上传 OTA 文件
680-
</a>
680+
</button>
681681
</div>
682+
<div id="upload_status" class="mdl-progress mdl-js-progress"></div>
682683
</div>
683684

684685
<div class="page page7 mdl-cell mdl-cell--12-col demo-card-square mdl-card mdl-shadow--2dp">
@@ -689,10 +690,10 @@ <h2 class="mdl-card__title-text">系统日志</h2>
689690
<pre id="sys_log"></pre>
690691
</div>
691692
<div class="mdl-card__actions mdl-card--border">
692-
<a href="javascript:GetSysLog();"
693-
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
693+
<button type="button" onclick="GetSysLog();"
694+
class="mdl-button mdl-button--colored ">
694695
刷新
695-
</a>
696+
</button>
696697
</div>
697698
</div>
698699

@@ -1504,12 +1505,15 @@ <h2 class="mdl-card__title-text">系统日志</h2>
15041505
var ota_url = document.getElementById("ota_url").value;
15051506
var protocol = window.location.protocol;
15061507
var baseUrl = protocol+"//"+window.location.host;
1507-
1508+
document.getElementById("submit-ota-link").disabled = true;
15081509
HttpPost("/ota", function (re) {
15091510
OtaStatus();
15101511
}, ota_url);
15111512
}
1512-
1513+
var upload_status = document.querySelector('#upload_status');
1514+
upload_status.addEventListener('mdl-componentupgraded', function() {
1515+
this.MaterialProgress.setProgress(0);
1516+
});
15131517
function OtaFileUpload() {
15141518
//alert("假的假的是假的，忽略");
15151519
//return;
@@ -1520,12 +1524,31 @@ <h2 class="mdl-card__title-text">系统日志</h2>
15201524
}
15211525
clearTimeout(powerTimerId);
15221526
console.log(fileInput.files[0].size); // 应显示 647168 左右
1523-
fetch("/ota/fileUpload", {
1524-
method: "POST",
1525-
headers: { "Content-Type": "application/octet-stream" },
1526-
body: fileInput.files[0]
1527-
}).then(r => r.text()).then(alert).catch(alert);
1528-
}
1527+
document.getElementById("submit-ota-file").disabled = true;
1528+
const xhr = new XMLHttpRequest();
1529+
xhr.open("POST", "/ota/fileUpload");
1530+
1531+
xhr.upload.onprogress = function (e) {
1532+
if (e.lengthComputable) {
1533+
let percent = (e.loaded / e.total * 100).toFixed(1);
1534+
upload_status.MaterialProgress.setProgress(percent);
1535+
console.log(`上传进度：${percent}%`);
1536+
}
1537+
};
1538+
1539+
xhr.onload = function () {
1540+
alert("上传完成：" + xhr.responseText);
1541+
document.getElementById("submit-ota-file").disabled = false;
1542+
};
1543+
1544+
xhr.onerror = function () {
1545+
alert("上传失败");
1546+
document.getElementById("submit-ota-file").disabled = false;
1547+
};
1548+
1549+
xhr.setRequestHeader("Content-Type", "application/octet-stream");
1550+
xhr.send(fileInput.files[0]);
1551+
}
15291552

15301553
var ota_status = document.querySelector('#ota_status');
15311554
ota_status.addEventListener('mdl-componentupgraded', function() {

0 commit comments

Comments
 (0)