当前位置: 首页 > 資訊 >

JS 41 - 顯示非同步請求的上傳進度條

大家好!

今天要實作非同步請求的上傳進度條。
我們進入今天的主題吧!


程式碼

const xhr = new XMLHttpRequest();
Felix(xhr.upload).on('progress', function (e) {
    if (!e.lengthComputable) return;
    const progress = e.loaded / e.total * 100 + '%';
    Felix('#progress > div').width = progress;
});
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.send(JSON.stringify({ name: 'Felix', date: '2021-10-26' }));

實測

<div id="progress">
    <div></div>
</div>

範例連結製作中。


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!