问题描述
在kendoui中,如果将upload的async.autoUpload配置设置为false,点击选择文件后,会出现上传文件的文件名,但是这个文件名往往不能满足变化莫测的需求。
上图中文件名前面多了扩展名,还有也不能满足文件名和文件大小之间留下X个空格的要求。
解决方案
其实问题的关键就是如何修改文件名。
在kendoui中,可以通过模板配置(template)来修改文件名。使用模板配置一般有如下2个步骤
- 声明模板
<!--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# #=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-->
- 在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
},
...
});
这样,最后文件名的显示方式会按照模板中描述的方式来展示