如何将进度条与文件上传指令绑定？附尝试代码及示例链接

我看了你现在的代码，要把进度条和文件上传指令绑定起来，核心就是要在上传过程中实时捕获进度数据，再同步到进度条的UI上。下面给你一步步拆解实现方法：

1. 补全HTML结构 #

先把你提供的HTML完善，给进度条加上百分比显示的文本，确保结构完整：

<div>
  <label class="btn btn-success">
    File Upload 
    <input type="file" file-upload>
  </label>
</div>
<div class="progress">
  <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" 
       role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" 
       style="width: 0%">
    <span id="progress-text">0% Complete</span>
  </div>
</div>

2. 改造上传指令，添加进度监听 #

在你的AngularJS指令里，需要借助XMLHttpRequest的上传进度事件，实时计算并更新进度条状态：

angular.module('uploadApp', [])
.directive('fileUpload', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.on('change', function(e) {
        const selectedFile = e.target.files[0];
        if (!selectedFile) return;

        const formData = new FormData();
        formData.append('uploadFile', selectedFile);

        const xhr = new XMLHttpRequest();
        // 监听上传进度事件
        xhr.upload.addEventListener('progress', function(event) {
          if (event.lengthComputable) {
            // 计算已上传百分比
            const progressPercent = Math.round((event.loaded / event.total) * 100);
            // 获取进度条元素
            const progressBar = document.getElementById('dynamic');
            const progressText = document.getElementById('progress-text');
            
            // 更新进度条样式和属性
            progressBar.style.width = `${progressPercent}%`;
            progressBar.setAttribute('aria-valuenow', progressPercent);
            progressText.textContent = `${progressPercent}% Complete`;
          }
        });

        // 配置上传请求（替换成你的实际上传接口）
        xhr.open('POST', '/your-upload-api', true);
        xhr.send(formData);

        // 上传完成后的收尾处理
        xhr.onload = function() {
          if (xhr.status === 200) {
            console.log('文件上传成功！');
            // 重置进度条和文件输入框
            const progressBar = document.getElementById('dynamic');
            const progressText = document.getElementById('progress-text');
            progressBar.style.width = '0%';
            progressBar.setAttribute('aria-valuenow', 0);
            progressText.textContent = '0% Complete';
            element.val('');
          } else {
            console.error('文件上传失败，请重试');
          }
        };
      });
    }
  };
});

3. 关键逻辑说明 #

• 核心是利用XMLHttpRequest.upload对象的progress事件，它会在上传过程中持续触发，通过event.loaded（已上传字节数）和event.total（文件总字节数）计算进度百分比。
• 实时更新进度条的宽度、aria-valuenow属性和显示文本，既保证视觉反馈，也符合无障碍访问的要求。
• 上传完成后记得重置进度条和文件输入框，方便用户进行下一次上传操作。

内容的提问来源于stack exchange，提问作者GrailsLearner