在网页开发中，实现带进度条的文件上传功能能够显著提升用户体验。通过 JavaScript，我们可以轻松达成这一目标。

创建一个基本的 HTML 结构，包含一个文件输入框、一个进度条以及一个上传按钮。文件输入框用于用户选择要上传的文件，进度条直观展示上传进度，上传按钮触发上传操作。

<input type="file" id="fileInput">
<div id="progressBar" style="width: 300px; height: 20px; background-color: #f0f0f0;"></div>
<button id="uploadButton">上传</button>

接下来，使用 JavaScript 为上传按钮添加点击事件监听器。在点击事件处理函数中，获取用户选择的文件，并创建一个 XMLHttpRequest 对象。XMLHttpRequest 是用于在后台与服务器进行异步通信的技术。

const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');
const uploadButton = document.getElementById('uploadButton');

uploadButton.addEventListener('click', function () {
    const file = fileInput.files[0];
    if (file) {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload.php', true); 

        // 监听上传进度
        xhr.upload.addEventListener('progress', function (e) {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                progressBar.style.width = percentComplete + '%';
            }
        });

        // 监听上传完成
        xhr.addEventListener('load', function () {
            if (xhr.status === 200) {
                console.log('文件上传成功');
            } else {
                console.log('文件上传失败');
            }
        });

        const formData = new FormData();
        formData.append('file', file);
        xhr.send(formData);
    }
});

上述代码中，xhr.upload.addEventListener('progress', function (e) {... }) 用于监听上传进度。e.lengthComputable 判断进度是否可计算，若可计算，则通过 (e.loaded / e.total) * 100 计算上传百分比，并更新进度条的宽度。

xhr.addEventListener('load', function () {... }) 监听上传完成事件，根据服务器返回的状态码判断上传是否成功。

最后，将文件添加到 FormData 对象中，并使用 xhr.send(formData) 发送请求到服务器端（这里的 upload.php 是示例服务器端脚本）。

通过以上步骤，我们就利用 JavaScript 实现了带进度条的文件上传功能，为用户提供了更友好、直观的上传体验。