Kendo UI上载服务器和更新客户端上的重命名文件

时间:2015-11-03 20:56:33

标签: kendo-ui kendo-upload

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

小部件配置:

using System;
using System.Collections.Generic;

/// <summary>
///     Writes the specified data, followed by the current line terminator, to the standard output stream, while wrapping lines that would otherwise break words.
/// </summary>
/// <param name="paragraph">The value to write.</param>
/// <param name="tabSize">The value that indicates the column width of tab characters.</param>
public static void WriteLineWordWrap(string paragraph, int tabSize = 8)
{
    string[] lines = paragraph
        .Replace("\t", new String(' ', tabSize))
        .Split(new string[] { Environment.NewLine }, StringSplitOptions.None);

    for (int i = 0; i < lines.Length; i++) {
        string process = lines[i];
        List<String> wrapped = new List<string>();

        while (process.Length > Console.WindowWidth) {
            int wrapAt = process.LastIndexOf(' ', Math.Min(Console.WindowWidth - 1, process.Length));
            if (wrapAt <= 0) break;

            wrapped.Add(process.Substring(0, wrapAt));
            process = process.Remove(0, wrapAt + 1);
        }

        foreach (string wrap in wrapped) {
            Console.WriteLine(wrap);
        }

        Console.WriteLine(process);
    }
}

服务器响应:

<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块显示错误的(原始)文件名。

不确定我修改文件名的方式是否正确。有谁知道如何正确更新文件名绑定或如果我错过了一步(以某种方式更新使用的模板)?

1 个答案:

答案 0 :(得分:1)

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

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

.filename是模板中的元素:

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

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