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

Question

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

谢谢！

score 9 · Accepted Answer

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

请注意，这仅适用于您的文件上传未设置为自动同步的情况。如果您使用自动上传功能，您可以在此处的 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");
        }
    }
});

差不多就是这样！

score 4 · Accepted Answer

我想出了一个方法来做到这一点。

基本上，您需要模仿 Upload 控件生成的 HTML，并且使用一些 JavaScript 来连接每个项目。我最初将 HTML 呈现为隐藏，然后在初始化 Kendo Upload 控件后，将 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();
}

你可以在我的博客上找到完整的文章，在那里我深入探讨了这个话题。我希望这可以帮助你！

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

它仅适用于异步模式。

score 0 · Accepted Answer

Try this...

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

              }))

My Model has a reference to my "FundRequest" object that has a List of "File" objects, so I just loop through each "File" and add.

score 0 · Accepted Answer

看一下这个！

<script>
    var files = [
        { name: "file1.doc", size: 525, extension: ".doc" },
        { name: "file2.jpg", size: 600, extension: ".jpg" },
        { name: "file3.xls", size: 720, extension: ".xls" },
    ];

    $("#upload").kendoUpload({
        async: {
            saveUrl: "Home/Save",
            removeUrl: "Home/Remove",
            autoUpload: true
        },
        files: files
    });
</script>

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

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

6 回答 6

Related

Reference