Blueimp jQuery File Upload progressall事件异常问题排查求助

嘿，我明白你遇到的困扰了——设置了整体进度条但progressall事件完全没反应，确实挺闹心的。我来给你梳理一下正确的实现步骤，帮你搞定这个问题。

先排查常见的错误点 #

首先先检查这几个容易踩的坑：

• 是不是把事件名写错了？是**progressall**（全小写），不是progressAll或者其他大小写组合
• 文件输入框有没有加multiple属性？要支持多选的话必须加
• 初始化插件的时机对不对？确保DOM加载完成后再初始化
• 有没有正确引入Blueimp的依赖？比如jQuery、File Upload的核心JS文件

完整的可运行示例代码 #

下面是符合你需求的完整实现，包含按钮触发选择、自动上传、整体进度条、上传完成弹模态框展示状态的功能，重点确保progressall事件正常工作：

HTML 结构 #

<!-- 隐藏原生文件输入框 -->
<input id="fileupload" type="file" name="files[]" multiple style="display: none;">

<!-- 触发选择文件的按钮 -->
<button id="upload-trigger" class="btn btn-primary">选择文件上传</button>

<!-- 整体上传进度条 -->
<div class="progress mt-3" style="display: none;">
  <div id="progress-all" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>

<!-- 上传结果模态框 -->
<div class="modal fade" id="upload-result-modal" tabindex="-1" aria-labelledby="resultModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="resultModalLabel">上传结果</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul id="upload-results" class="list-group"></ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

JavaScript 代码 #

$(document).ready(function() {
  // 存储所有文件的上传状态
  let uploadResults = [];

  // 初始化文件上传插件
  $('#fileupload').fileupload({
    url: '/你的上传接口地址', // 替换成你的实际上传接口
    autoUpload: true, // 开启自动上传
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, // 可根据需求限制文件类型，可选
    maxFileSize: 5000000, // 限制文件大小，可选，这里是5MB

    // 绑定整体进度事件
    progressall: function(e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#progress-all').css(
        'width',
        progress + '%'
      ).attr('aria-valuenow', progress);
      // 显示进度条
      $('.progress').show();
    },

    // 单个文件上传成功
    done: function(e, data) {
      uploadResults.push({
        name: data.files[0].name,
        status: '成功',
        message: '文件上传完成'
      });
    },

    // 单个文件上传失败
    fail: function(e, data) {
      uploadResults.push({
        name: data.files[0].name,
        status: '失败',
        message: data.errorThrown || '上传出错'
      });
    },

    // 所有文件上传完成（不管成功失败）
    stop: function(e) {
      // 填充模态框内容
      const $resultsList = $('#upload-results');
      $resultsList.empty();
      uploadResults.forEach(item => {
        const statusClass = item.status === '成功' ? 'list-group-item-success' : 'list-group-item-danger';
        $resultsList.append(`<li class="list-group-item ${statusClass}">${item.name} - ${item.status}: ${item.message}</li>`);
      });
      // 重置进度条和结果数组
      $('#progress-all').css('width', '0%').attr('aria-valuenow', 0);
      $('.progress').hide();
      uploadResults = [];
      // 打开模态框
      const modal = new bootstrap.Modal(document.getElementById('upload-result-modal'));
      modal.show();
    }
  });

  // 按钮触发文件选择框
  $('#upload-trigger').click(function() {
    $('#fileupload').click();
  });
});

关键要点说明 #

1. progressall 事件的正确绑定：
   必须在fileupload初始化配置中直接声明，或者用$('#fileupload').on('progressall', function(e, data) { ... })的方式绑定，确保事件被插件正确监听。

2. 服务器端支持：
   虽然浏览器端的进度事件是基于XMLHttpRequest的，但如果你的服务器端没有返回正确的响应头（比如Content-Length），可能会导致进度计算不准确。确保上传接口能正确处理文件上传，并返回合适的响应。

3. 进度条的显示逻辑：
   在progressall事件触发时显示进度条，所有文件上传完成（stop事件）后隐藏并重置进度条，提升用户体验。

4. 结果收集与模态框展示：
   通过done和fail事件收集每个文件的状态，在stop事件（所有上传任务结束时）统一展示到模态框中，这比在单个文件完成时处理更符合你的需求。

额外排查步骤 #

如果还是没效果，可以试试这些：

• 打开浏览器开发者工具的网络面板，查看上传请求是否正常发送，有没有返回错误
• 检查Blueimp File Upload的版本，确保使用的是最新稳定版（避免旧版本的bug）
• 尝试简化代码，去掉不必要的配置，先让progressall事件能触发，再逐步添加其他功能

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