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

问题描述

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

不合需求的文件名

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

解决方案

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

1. 声明模板

<!--add by xiaotong.wu@hand-china.com 2017/11/7-->
    <script id="fileTemplate" type="text/x-kendo-template">
        <div>
            <!--文件名+3个空格+文件大小-->
            <p style="margin:0px;">#=name#&nbsp;&nbsp;&nbsp;#=parseInt(size/1024)#kb</p>
            <!--右边具有清除功能的'X'按钮-->
            <button type='button' class='k-upload-action' style='position: absolute; top: 8px; right: 0;'></button>
        </div>
    </script>
    <!--add end-->

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

$("#importExcelFile").kendoUpload({
            <!--add by xiaotong.wu@hand-china.com 2017/11/7-->
            template: kendo.template($('#fileTemplate').html()),
            <!--add end-->
            async:{
                saveUrl: baseUrl+"/upload?${_csrf.parameterName}=${_csrf.token}",
                autoUpload: false
            },
            ...
        });

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

自定义文件名