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

Posted 2023-05-07

【中文标题】如何使用以前上传的文件填充 Kendo Upload

【英文标题】：How to populate Kendo Upload with previously uploaded files

【发布时间】：2012-12-04 22:56:44

【问题描述】：

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

谢谢！

【参考方案1】：

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

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

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

$(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");
        
    
);

差不多就是这样！

【讨论】：

你好，谢谢你的好回答。请帮忙。如何在绿色主题（如剑道异步）上显示初始化文件？ (.k-file-success)

@valverij 知道我们如何在编辑模式下在剑道网格中实现这一点吗？

@minamorsali 如果你想这样做，你需要一个一个地添加文件，用 for 循环替换 var file = upload._enqueueFile(name, relatedInput : sourceInput, fileNames : files ); upload._fileAction(file, "remove");。与此类似：

@minamorsali Sommeting 与此类似：for (var i = 0; i < filesJson.lenght; i++) var file = upload._enqueueFile("", relatedInput: sourceInput, fileNames: [filesJson[i]] ); file.addClass("k-file-success").data("files", [filesJson[i]]); upload._fileState(file, "uploaded"); upload._fileAction(file, "remove");

【参考方案2】：

我想出了一个办法。

基本上，您需要模仿 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();

您可以找到full write up on my blog 我深入探讨该主题的地方。希望对你有帮助！

【讨论】：

感谢您的帖子！请不要在您的帖子中使用签名/标语。您的用户框算作您的签名，您可以使用您的个人资料发布您喜欢的任何关于您自己的信息。 FAQ on signatures/taglines

哦，对不起！感谢您删除它。

@dwhite 知道我们如何在编辑模式下在剑道网格中实现这一点吗？

【参考方案3】：

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

【参考方案4】：

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

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

它只在异步模式下工作。

【参考方案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”对象，该对象有一个“文件”对象列表，所以我只需遍历每个“文件”并添加。

【参考方案6】：

看看这个！

<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" />