Question

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

谢谢！

Answer 1

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

注意，这仅适用于未将文件上载设置为自动同步的情况。如果您使用自动上传功能，可以在此处的Kendo文档中找到示例：http://docs.kendoui.com/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
    }]
}

那么，剩下要做的就是把它们放在一起。基本上，我们将从Kendo的内部onSelect重新创建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

我提出了一种方法来做到这一点。

基本上，您需要模仿上传控件生成的HTML，并使用一些JavaScript来挂钩每个项目。我最初将HTML呈现为隐藏，然后在初始化Kendo上载控件之后，将HTML列表附加到Kendo创建的父容器中。

这是我的MVC观点：

@if (Model.Attachments != null && Model.Attachments.Count > 0)
{
  <ul id="existing-files" class="k-upload-files k-reset" style="display: none;">
    @foreach (var file in Model.Attachments)
    {
      <li class="k-file" data-att-id="@file.Id">
        <span class="k-icon k-success">uploaded</span>
        <span class="k-filename" title="@file.Name">@file.Name</span>
        <button type="button" class="k-button k-button-icontext k-upload-action">
          <span class="k-icon k-delete"></span>
          Remove
        </button>
      </li>
    }
  </ul>
}

这是JavaScript（注意，它是从CoffeeScript生成的）：

var $fileList, $files, item, _fn, _i, _len;
$fileList = $("#existing-files");
if ($fileList.length > 0) {
  $(".k-upload").append($fileList);
  $files = $(".k-file");
  _fn = function(item) {
    var $item, fileId, filenames;
    $item = $(item);
    fileId = $item.data("att-id");
    filenames = [
      {
        name: fileId
      }
    ];
    return $item.data("fileNames", filenames);
  };
  for (_i = 0, _len = $files.length; _i < _len; _i++) {
    item = $files[_i];
    _fn(item);
  }
  $fileList.show();
}

您可以找到我在这个主题上深入探讨的full write up on my blog。我希望这可以帮助你！

Answer 3

一些额外的搜索为我提供了不寻找的答案 - 根据this和this，Telerik不支持预先填充上传小部件上传的文件。

Answer 4

自从提出这个问题以来，它已被添加到选项中。

查看http://docs.telerik.com/kendo-ui/api/web/upload#configuration-files

它只能在异步模式下工作。

Answer 5

试试这个......

            @(Html.Kendo().Upload()
              .Name("files")
              .Async(a => a
                  .Save("SaveFile", "Home")
                  .Remove("RemoveFile", "Home")
                  .AutoUpload(true))
              .Files(files =>
              {
                  foreach (var file in Model.FundRequest.Files)
                  {
                          files.Add().Name(file.Name).Extension(Path.GetExtension(file.Name)).Size((long)file.SizeKb * 1024);
                   }

              }))

我的模型引用了我的“FundRequest”对象，它有一个“文件”对象列表，所以我只循环遍历每个“文件”并添加。

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

5 个答案: