Kendo UI Upload添加无效文件类型时Error事件未触发，是否遗漏配置？

哦，我明白你碰到的问题了！Kendo Upload的error事件其实并非用于处理本地客户端的文件验证失败——它的核心作用是捕获文件上传到服务器过程中出现的错误（比如服务器返回异常、网络中断这类情况）。而你配置的allowedExtensions属于本地验证规则，这类验证失败并不会触发error事件，而是会触发select事件，或者你可以直接依赖Kendo内置的验证提示机制。

两种解决方案 #

方案1：使用Kendo内置的验证提示（最简单） #

你已经正确配置了allowedExtensions: [".json"]，Kendo Upload默认会自动拦截不符合扩展名要求的文件，并且在界面上显示红色的错误提示，完全不需要手动编写onError函数。如果没看到提示，请确认你已经正确引入了Kendo的样式文件（从你的代码来看是没问题的），默认的validation.validateFiles属性是true，会自动启用验证。

方案2：自定义处理验证失败逻辑（通过select事件） #

如果你想自己控制验证失败后的提示或操作，可以监听select事件，在事件回调里筛选出验证失败的文件并处理：

$(document).ready(() => { IniUploadJSONFile(); });
function IniUploadJSONFile() {
  $("#ImportJSONOrderFile").empty();
  $("#ImportJSONOrderFile").kendoUpload({
    async: {
      autoUpload: false,
      multiple: false
    },
    validation: {
      allowedExtensions: [".json"]
    },
    select: onSelect, // 添加select事件监听
    error: onError // 保留此事件处理上传阶段的错误
  });
}

// 处理文件选中后的验证逻辑
function onSelect(e) {
  // 筛选出验证失败的文件
  const invalidFiles = e.files.filter(file => !file.validation.valid);
  
  if (invalidFiles.length > 0) {
    e.preventDefault(); // 阻止无效文件加入上传队列
    invalidFiles.forEach(file => {
      alert("Validation failed for " + file.name);
    });
  }
}

// 处理上传到服务器时的错误（比如网络问题、服务器报错）
function onError(e) {
  var files = e.files;
  for (var i = 0; i < files.length; i++) {
    alert("Upload failed for " + files[i].name);
    var uid = files[i].uid;
    var entry = $(".k-file[data-uid='" + uid + "']");
    if (entry.length > 0) {
      entry.remove();
    }
  }
}

关键说明 #

• select事件会在用户选中文件后立即触发，此时可以通过file.validation.valid判断当前文件是否通过了配置的验证规则。
• 调用e.preventDefault()可以阻止验证失败的文件被添加到上传队列中，避免后续的无效操作。
• 原来的error事件依然保留，用于处理文件上传到服务器过程中出现的异常情况。

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