問(wèn)題描述
在kendoui中需纳，如果將upload的async.autoUpload配置設(shè)置為false芦倒，點(diǎn)擊選擇文件后，會(huì)出現(xiàn)上傳文件的文件名不翩，但是這個(gè)文件名往往不能滿足變化莫測(cè)的需求兵扬。
不合需求的文件名
上圖中文件名前面多了擴(kuò)展名，還有也不能滿足文件名和文件大小之間留下X個(gè)空格的要求口蝠。
解決方案
其實(shí)問(wèn)題的關(guān)鍵就是如何修改文件名器钟。
在kendoui中，可以通過(guò)模板配置（template）來(lái)修改文件名妙蔗。使用模板配置一般有如下2個(gè)步驟
- 聲明模板
<!--add by xiaotong.wu@hand-china.com 2017/11/7-->
<script id="fileTemplate" type="text/x-kendo-template">
<div>
<!--文件名+3個(gè)空格+文件大小-->
<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
},
...
});
這樣傲霸，最后文件名的顯示方式會(huì)按照模板中描述的方式來(lái)展示
自定義文件名
