Kendo UI File Uploader无法提交文件，求解决方案

DevOps 小满

2026-5-27

解决Kendo UI File Uploader无法提交文件的问题

我之前也碰到过几乎一模一样的Kendo Upload异步上传无文件的问题，结合你的描述，咱们一步步排查解决：

1. 确保Kendo Upload正确绑定到目标file输入框

首先要确认你的JS初始化代码准确指向了那个name为attachments[]的file输入框。很多时候问题出在选择器错误，导致Kendo没有正确接管原生file控件。比如如果你的输入框有IDattachments，初始化代码应该是：

$("#attachments").kendoUpload({
    saveUrl: "/upload/add",
    autoUpload: true,
    multiple: true // 对应原生的multiple属性
});

另外，尽量不要手动给原生file输入框加display: none——Kendo Upload会自动隐藏原生控件并生成自己的UI，手动隐藏可能导致控件无法正常触发文件选择逻辑。

2. 检查请求的Content-Type是否正确

Kendo Upload异步上传时应该自动设置multipart/form-data的请求头（这是文件上传必需的）。你可以打开浏览器开发者工具的Network面板，找到/upload/add的请求，查看Request Headers里的Content-Type：

正确格式应该是multipart/form-data; boundary=----WebKitFormBoundaryxxxxxx（结尾有随机边界字符串）
如果显示的是application/json或者其他格式，说明请求头被篡改了

如果出现这种情况，检查是否有全局的jQuery Ajax配置覆盖了contentType，可以在Kendo的upload事件里强制确保请求格式正确：

$("#attachments").kendoUpload({
    saveUrl: "/upload/add",
    autoUpload: true,
    upload: function(e) {
        // 不要手动设置e.data，避免覆盖Kendo自动生成的FormData
        e.xhr.setRequestHeader("Content-Type", "multipart/form-data");
    }
});

3. 排查PHP服务器端的配置限制

你的服务器端所有文件相关变量为空，很可能是PHP的上传配置限制导致的：

打开php.ini文件，检查以下参数：
- upload_max_filesize: 必须大于你要上传的2MB，比如设置为10M
- post_max_size: 这个值要大于等于upload_max_filesize，比如10M
- max_file_uploads: 确保允许的上传文件数量足够（默认是20，满足你的multiple需求）
修改后记得重启Web服务器（比如Apache/Nginx）

4. 排除全局Ajax拦截或FormData篡改的可能

有些项目会添加全局的jQuery Ajax钩子（比如$.ajaxSetup()或者beforeSend事件），可能会修改请求数据或头信息，导致文件没有被正确附加。可以暂时禁用这些全局拦截，测试是否能正常上传。

另外，不要在Kendo的upload事件里手动创建或修改FormData——Kendo会自动把选中的文件加入FormData，手动干预很容易破坏这个逻辑。

5. 用开发者工具确认请求内容

最后一步，在Network面板里查看请求的Form Data（如果是multipart请求）：

展开后应该能看到attachments[]对应的文件条目，包含文件名、大小等信息
如果这里完全没有文件数据，说明前端没有正确把文件加入请求；如果有，但服务器拿不到，就重点排查PHP配置或服务器路由规则

完整的前端+后端示例

前端代码

<!-- 原生file输入框，Kendo会自动处理它的显示 -->
<input type="file" name="attachments[]" multiple id="attachments">

<script>
$("#attachments").kendoUpload({
    saveUrl: "/upload/add",
    autoUpload: true,
    multiple: true,
    // 添加调试事件，方便排查问题
    success: function(e) {
        console.log("上传成功响应:", e.response);
    },
    error: function(e) {
        console.error("上传失败详情:", e.xhr.responseText);
    }
});
</script>

后端PHP代码

<?php
header('Content-Type: application/json');

// 检查是否收到文件
if (!empty($_FILES['attachments'])) {
    $uploadDir = './uploads/';
    // 确保上传目录存在
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0755, true);
    }

    $results = [];
    foreach ($_FILES['attachments']['tmp_name'] as $index => $tmpPath) {
        $fileName = $_FILES['attachments']['name'][$index];
        $targetPath = $uploadDir . basename($fileName);
        
        if (move_uploaded_file($tmpPath, $targetPath)) {
            $results[] = ['name' => $fileName, 'status' => 'success'];
        } else {
            $results[] = ['name' => $fileName, 'status' => 'error', 'message' => '文件移动失败'];
        }
    }

    echo json_encode(['status' => 'ok', 'data' => $results]);
} else {
    echo json_encode(['status' => 'error', 'message' => '未接收到上传文件']);
}
?>

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

Kendo UI File Uploader无法提交文件，求解决方案

1. 确保Kendo Upload正确绑定到目标file输入框 #

2. 检查请求的Content-Type是否正确 #

3. 排查PHP服务器端的配置限制 #

4. 排除全局Ajax拦截或FormData篡改的可能 #

5. 用开发者工具确认请求内容 #

完整的前端+后端示例 #