文件上传是 Web 应用程序开发中非常常见的操作，例如上传图片、视频、文档等。然而，上传大文件或者慢速的网络环境中上传文件时，用户可能会遇到等待时间较长或者无法确定文件上传进度的问题。因此，实现文件上传进度条是提高用户体验和应用程序质量不可或缺的一部分。
在前端技术中，利用 ES8 的 XHR 对象中的 ProgressEvent 属性可以轻松监测文件上传进度，并通过事件回调展示或更新文件上传进度条。
XHR 对象
首先，我们需要使用 XMLHttpRequest 对象（简称 XHR）来处理文件上传。ES8 中，XHR 对象扩展了一个 ProgressEvent 属性，用于检测文件上传的进度。在文件上传时，使用 onuploadprogress 回调监听上传进度，并从百分比形式中获取当前的上传进度。
let xhr = new XMLHttpsRequest();
xhr.upload.addEventListener('progress', event => {
let percent = (event.loaded / event.total) * 100;
console.log(`上传进度: ${percent}%`);
}, false);在上述代码中，xhr.upload 监测到上传事件，向服务器 POST 文件时，通过 onuploadprogress 回调更新进度显示。参数 event 表示 ProgressEvent 对象，其中包含 loaded 和 total 属性，分别表示已上传和总上传量并用于计算百分比。
为了展示文件上传进度，我们通常会使用 Web 开发中的一些 UI 框架，如 Bootstrap 或者 Materialize CSS。下面是一个使用 Bootstrap 的示例上传表单形式。
-- -------------------- ---- -------
----- ------------- ------------------------------
---- -------------------
------ -----------------------
------ ----------- ----------- --------- ---------
------
---- -----------------
---- -------------------- ------- ------------------ ------------- ---- ----------------- ----------------- --------------------
--
------
------
------- ------------- ---------- ----------- ----------------------
------- 在上述代码中，我们通过 form 表单和 input 标签控件设置文件上传界面。进度条由 Bootstrap 的 CSS 样式和 ID 为 pb 的 div 标签组成。
在 JavaScript 代码中，我们需要找到该表单，并附加事件监听器。然后通过 FormData 对象封装当前文件，且向服务器发送 POST 请求并在进度更新的回调中更新进度条。
-- -------------------- ---- -------
--- ---- - -------------------------------
------------------------------- ------- -- -
----------------------- -- ----------
--- -------- - --- --------------- -- ------------
--- --- - --- -----------------
--------------------------------------- ----- -- -
-- ------------------------ -
--- ------- - ------------------------ - ------------ - -----
--------------- - ------- - ----
--------------- - ------- - ----
-
-- -------
---------------------- - -- ---
-- --------------- --- ------------------- -- ---------- --- ---- -
------------------------------ -- --------
-
--
---------------- -----------
-------------------
---上面的示例中，我们为 submit 事件附加事件监听器。当表单中的提交按钮被点击后，event.preventDefault() 方法可以阻止表单的默认提交行为。接着，我们使用 FormData() 方法包装表单数据，创建一个 XMLHttpRequest 对象 xhr，指定进度更新的回调函数并打开 POST 请求。最后，将表单数据通过 xhr.send() 方法提交到服务器并更新进度条或者在上传完成后的回调中处理服务器响应。
总结
本文介绍了如何利用 ES8 的 XHR 对象中的 ProgressEvent 属性实现文件上传进度条。通过 onuploadprogress 回调函数，我们可以轻松获得当前的上传进度并更新 UI 中的进度条。同时，这也是 Web 应用程序可持续性和响应性提升的关键。通过本文的学习和实践，相信开发者们对于实现 文件上传进度条 有了更深刻的认识和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647efb7948841e9894eab6f7