Kendo Upload控件技术咨询：如何监听全部文件上传完成以避免表单提前提交

因为Kendo Upload没有直接提供“所有文件上传完成”的事件，我们可以通过手动维护上传任务计数来实现需求：

• 首先声明一个变量跟踪正在进行的上传任务数：

  let activeUploads = 0;
  

• 在Upload控件的upload事件中，每开始一个上传就增加计数，并禁用表单提交按钮：

  $("#yourUpload").kendoUpload({
    upload: function() {
      activeUploads++;
      $("#submitButton").prop("disabled", true);
    },
    // 其他配置（如async设置等）
  });
  

• 绑定success和error事件，无论上传成功或失败，都减少计数；当计数归0时，重新启用提交按钮：

  $("#yourUpload").kendoUpload({
    // 已有配置
    success: function() {
      activeUploads--;
      if (activeUploads === 0) {
        $("#submitButton").prop("disabled", false);
      }
    },
    error: function() {
      activeUploads--;
      if (activeUploads === 0) {
        $("#submitButton").prop("disabled", false);
      }
    }
  });
  

• 最后给表单绑定提交事件，做最后一次校验，避免按钮状态异常导致的误提交：

  $("#yourForm").on("submit", function(e) {
    if (activeUploads > 0) {
      e.preventDefault();
      alert("还有文件在上传，请等待完成后再提交");
    }
  });
  

这种方式能精准控制表单提交状态，确保只有所有上传任务完成后才能提交表单。

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