Kendo Upload：如何监听两个非自动上传控件的全部完成事件

这个问题我刚好处理过，其实核心就是跟踪两个上传组件的完成状态，等两者都触发complete事件后再执行后续逻辑。这里有两种靠谱的实现方式，你可以根据自己的习惯选：

方法一：用计数器跟踪完成状态 #

这种方法简单直观，适合快速落地：

1. 先定义一个计数器，初始值设为上传组件的总数（这里是2）
2. 给每个Upload绑定complete事件，每次触发就把计数器减1
3. 当计数器减到0时，说明两个上传都完成了，执行你的后续处理逻辑
4. 点击按钮时，手动触发两个Upload的上传动作

// 初始化计数器，对应上传组件的数量
let uploadCompleteCount = 2;

// 配置第一个Upload组件
$("#upload1").kendoUpload({
    autoUpload: false,
    complete: function() {
        checkAllUploadsComplete();
    },
    // 其他配置（比如url、accept等）...
});

// 配置第二个Upload组件
$("#upload2").kendoUpload({
    autoUpload: false,
    complete: function() {
        checkAllUploadsComplete();
    },
    // 其他配置...
});

// 检查所有上传是否完成的通用函数
function checkAllUploadsComplete() {
    uploadCompleteCount--;
    if (uploadCompleteCount === 0) {
        // 这里写所有上传完成后的后续处理逻辑
        console.log("两个上传都搞定了！开始执行后续任务...");
        // 重要：如果需要重复触发上传，记得重置计数器
        uploadCompleteCount = 2;
    }
}

// 绑定按钮点击事件，触发上传
$("#triggerUploadBtn").on("click", function() {
    // 手动触发第一个组件的上传
    $("#upload1").data("kendoUpload").upload();
    // 手动触发第二个组件的上传
    $("#upload2").data("kendoUpload").upload();
});

方法二：用Promise.all优雅处理异步 #

如果更习惯异步编程的Promise写法，这种方式更清晰，也更容易扩展到更多上传组件的场景：

1. 把每个Upload的上传过程封装成一个Promise
2. 点击按钮时，同时触发两个上传，用Promise.all等待两者都完成
3. 当Promise.all resolve时，执行后续处理

// 封装一个函数，返回对应Upload完成的Promise
function createUploadPromise(uploadSelector) {
    return new Promise((resolve) => {
        const uploadInstance = $(uploadSelector).kendoUpload({
            autoUpload: false,
            complete: function() {
                resolve();
            },
            // 其他配置...
        }).data("kendoUpload");
        
        // 把实例存起来，方便后续触发上传
        $(uploadSelector).data("uploadInstance", uploadInstance);
    });
}

// 初始化两个Upload的Promise
const upload1Done = createUploadPromise("#upload1");
const upload2Done = createUploadPromise("#upload2");

// 按钮点击触发上传并等待完成
$("#triggerUploadBtn").on("click", async function() {
    // 触发两个组件的上传动作
    $("#upload1").data("uploadInstance").upload();
    $("#upload2").data("uploadInstance").upload();
    
    try {
        // 等待两个上传都完成
        await Promise.all([upload1Done, upload2Done]);
        // 所有上传完成后的逻辑
        console.log("两个上传都完成了！执行后续处理...");
        
        // 如果需要重复上传，记得重新生成Promise或者重置状态
    } catch (error) {
        // 处理上传失败的情况（可选）
        console.error("上传过程出错：", error);
    }
});

额外注意事项 #

• 如果需要支持重复上传，一定要在每次完成后重置计数器或者重新生成Promise，不然第一次完成后，后续的上传不会触发逻辑
• 如果要处理上传失败的场景，可以给Upload绑定error事件，在里面做标记或者重新计数

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