Kendo UI 在服务器上上传重命名文件并更新客户端

Question

我正在使用 Kendo UI 上传小部件，我在服务器上重命名了上传的文件。我 return 文件的新名称，我在成功事件中修改了文件名，但这并没有完全更新文件名。我的意思是，例如用于删除发送到服务器的上传文件的 links 具有正确的文件名，但我用来显示上传文件详细信息的模板具有原始文件名.

小部件配置：

<input type="file"
       name="file"
       data-role="upload"
       data-template="fileTemplate"
       data-multiple="false"
       data-async="{ saveUrl: 'uploadFile', removeUrl: 'removeFile', autoUpload: true } "
       data-bind="events: { success: uploadSuccess } " />

服务器响应：

[text/plain]
{ "fileName": "89sd0adf0das9fdsa9.jpg" }

查看模型：

var viewModel = kendo.observable({
    uploadSuccess: function (e) {
        // Not sure this is the correct way to accomplish this
        e.files[0].name = e.response.fileName;
    }
});

模板：

<script id="uploadTemplate" type="text/x-kendo-template">
    <span class='k-progress'></span>
    <div class='file-wrapper'>
        File name: #= name # <br/>
        <button type='button' class='k-upload-action'></button>
    </div>
</script>

.k-upload-action 按钮（使用 link 删除文件）将正确的文件名发送到服务器，但 File name: #= name # 块显示错误的（原始）文件名。

不确定我修改文件名的方式是否正确。有谁知道如何正确更新文件名绑定，或者我是否遗漏了一个步骤（以某种方式更新使用的模板）？

Answer 1

您必须手动更新文件名，例如

uploadSuccess: function (e) {
    $(".filename").text(e.response.fileName);
}

其中 .filename 是模板中的一个元素：

File name: <span class="filename">#= name #</span> <br/>

这是一个现场演示：http://dojo.telerik.com/@korchev/EGuXi

Kendo UI 在服务器上上传重命名文件并更新客户端

Kendo UI Upload rename file on server and update client

kendo-ui

kendo-upload