kendo-ui - 如何使用以前上传的文件填充剑道上传

Question

我正在为 MVC 使用 Kendo UI 文件上传，它工作得很好。在我的编辑页面上，我想显示之前从“创建”页面上传的文件。为了视觉一致性，我想在我的编辑页面上重新使用上传小部件，以便用户可以使用“删除”功能，或者如果他们选择添加其他文件。上传小部件是否支持此功能？

谢谢!

Answer 1

所以，我意识到这是一个很老的问题，但我最近想出了如何可靠地做到这一点。虽然此处的另一个答案肯定会显示文件，但它并没有真正将其连接到任何事件(特别是“删除”事件)。此外，与其手动设置所有这些，我想我更愿意让 Kendo 做所有真正肮脏的工作。

请注意，这仅适用于您的文件上传未设置为自动同步的情况。如果您使用自动上传功能，您可以在此处的 Kendo 文档中找到示例:http://docs.kendoui.com/api/web/upload#configuration-files

所以无论如何，让我们假设我们有一个文件输入，我们已经制作了一个剑道上传:

<input id="files" name="files" type="file" multiple="multiple" />

$(document).ready(function () { 
    var $upload = $("#files");
    var allowMultiple = Boolean($upload.attr("multiple"));

    $upload.kendoUpload({
        multiple: allowMultiple,
        showFileList: true,
        autoUpload: false        
    });
}

然后，我们只需要获取有关文件的信息到我们的 jQuery。我喜欢将它塞入隐藏字段中的 JSON 字符串中，但您可以随心所欲地进行。

这是一个使用 Mvc HtmlHelpers 和 Newtonsoft 的 JSON.NET 的示例(我不使用 Razor，但您应该了解总体思路):

if (Model.Attachments.Count > 0)
{
    var files = Model.Attachments.Select(x => new { name = x.FileName, extension = x.FileExtension, size = x.Size });
    var filesJson = JsonConvert.SerializeObject(files);
    Html.Render(Html.Hidden("existing-files", filesJson));
}

请注意，那里的格式非常重要。我们正在匹配 Kendo 期望的 JavaScript 对象的结构:

{
    relatedInput : sourceInput,
    fileNames: [{ // <-- this is the collection we just built above            
        name: "example.txt",
        extenstion: ".txt",            
        size: 1234
    }]
}

所以，剩下要做的就是把它们放在一起。基本上，我们将重新创建 onSelect来自 Kendo 内部的函数 syncUploadModule :

$(document).ready(function () {
    // setup the kendo upload
    var $upload = $("#files");
    var allowMultiple = Boolean($upload.attr("multiple"));

    var upload = $upload.kendoUpload({
        multiple: allowMultiple,
        showFileList: true,
        autoUpload: false        
    }).getKendoUpload();

    // initialize the files
    if (upload) {
        var filesJson = $("[name$='existing-files']").val();
        if (filesJson) {                
            var files = JSON.parse(filesJson);

            var name = $.map(files, function (item) {
                return item.name;
            }).join(", ");

            var sourceInput = upload._module.element.find("input[type='file']").last();
            upload._addInput(sourceInput.clone().val(""));
            var file = upload._enqueueFile(name, {
                relatedInput : sourceInput,
                fileNames : files
            });
            upload._fileAction(file, "remove");
        }
    }
});

仅此而已!