kendoui的upload组件如何修改上传文件的文件名

问题描述

在kendoui中，如果将upload的async.autoUpload配置设置为false，点击选择文件后，会出现上传文件的文件名，但是这个文件名往往不能满足变化莫测的需求。

不合需求的文件名

上图中文件名前面多了扩展名，还有也不能满足文件名和文件大小之间留下X个空格的要求。

解决方案

其实问题的关键就是如何修改文件名。
在kendoui中，可以通过模板配置（template）来修改文件名。使用模板配置一般有如下2个步骤

1. 声明模板

2. 在kendoUpload组件中用1中声明的模板配置template

$("#importExcelFile").kendoUpload({
            
            template: kendo.template($('#fileTemplate').html()),
            
            async:{
                saveUrl: baseUrl+"/upload?${_csrf.parameterName}=${_csrf.token}",
                autoUpload: false
            },
            ...
        });

这样，最后文件名的显示方式会按照模板中描述的方式来展示

自定义文件名