如何使用以前上传的文件填充Kendo Upload

Question

我正在使用Kendo UI File Upload for MVC,它运行良好.在我的编辑页面上,我想显示以前从"创建"页面上传的文件.为了视觉一致性,我想在我的编辑页面上重新使用上传小部件,以便用户可以使用"删除"功能,或者如果他们选择添加其他文件.上传小部件是否支持此功能？

谢谢!

Answer 1

所以,我意识到这个问题很古老,但我最近想出了如何可靠地做到这一点.虽然这里的其他答案肯定会显示文件,但它并没有真正将其连接到任何事件(特别是"删除"事件).而且,我并不是手动设置所有这些,而是​​我宁愿让剑道完成所有真正的肮脏工作.

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

所以无论如何,我们假设我们有一个文件输入,我们已经做了一个Kendo上传:

<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));
}

请注意,那里的格式非常重要.我们想要匹配剑道所期望的JavaScript对象的结构:

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

所以,剩下要做的就是把它们放在一起.基本上,我们将重新创建onSelectKendo内部的功能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");
        }
    }
});

这就是它!

Answer 2

一些额外的搜索给了我我没有寻找的答案- 根据this和this，Telerik 不支持使用以前上传的文档预先填充上传小部件。