Question

我正在使用Kendo UI MVC上传控件一次上传多个文件（即批量）。文档非常清楚要做什么，但我看到每个文件的单独上传请求，而不是所有人的单个上传请求。

这是我的上传控制代码

 Html.Kendo().Upload().Name("files")
     .TemplateId("fileUploadTemplate")
     .Events(e =>
      {
         e.Upload("onFileUpload");
      })
      .HtmlAttributes(new { accept = ".xls,.csv" })
      .Messages(m => m.Select("Select Files..."))
      .Async(a => a.Save("Upload", "Home").AutoUpload(false).Batch(true))

我使用kendo模板为每个上传的文件添加2个字段（开始和结束日期），如下所示。

How the upload control is rendered on screen

这是模板代码。

<script id="fileUploadTemplate" type="text/x-kendo-template">
      #var fileCount = $(".k-file .row").length;#
      #var startId = 'PeriodStart_' + fileCount; #
      #var endId = 'PeriodEnd_' + fileCount; #

      <span class="k-progress"></span>
      <div class="row">
        <div class="col-md-4">
          <span class="k-filename"><strong>#=name#</strong></span>
        </div>
        <div class="col-md-3 nopadding">
          Start: @(Html.Kendo().DatePicker().Name("#=startId#").ToClientTemplate())
        </div>
        <div class="col-md-3 nopadding">
          End: @(Html.Kendo().DatePicker().Name("#=endId#").ToClientTemplate())
        </div>
        <div class="col-md-1 text-right">
          <button type="button" class="k-upload-action"></button>
        </div>
   </div></script>

这是事件处理js代码，它收集了Start＆amp;每个文件的结束日期，并构造一个json对象以及多个文件发送到后端。

function onFileUpload(e) {
    var fileInfo = getUploadFileMetaData();        
    var modelAsJson = JSON.stringify(fileInfo);
    console.log(modelAsJson);
    e.data = {
        modelAsJson: modelAsJson
    };
}
function getUploadFileMetaData() {
    var numOfFiles = $(".k-file .row").length;
    var fileInfoArray = [];
    for (var i=0; i<numOfFiles;i++){
        var fi = {
            FileName: $(".k-filename strong")[i].innerText, //Filename is required as is since it'll be our key
            PeriodStart: $("#PeriodStart_" + i).data('kendoDatePicker').value(),
            PeriodEnd: $("#PeriodEnd_" + i).data('kendoDatePicker').value()
        }
        fileInfoArray[i] = fi;
    }
    return fileInfoArray;
}

因此，如果我选择要上传的2个文件，我会看到2个不同的请求被激活到Controller Action而不是1.我确定我没有看到任何直接的东西，并欣赏任何节目和告诉。

Answer 1

我通过Telerik论坛中的交叉发布找到了答案。

显然这是不可能做到的。只有当用户一次选择多个文件（Ctrl + Select）时才能进行批处理操作，而不是通过多次单击选择文件按钮逐个选择它们。只有当上传控件有1个行项目时，才能以另一种方式进行批处理模式 - 无论是1个还是多个文件。

此处有更多详情 - http://www.telerik.com/forums/batch-mode---not-working

Answer 2

我设法使Kendo Upload在批处理模式下完美运行。基本上，您可以将所有文件上传到浏览器，然后正常提交表单，然后将它们上传到服务器和/或同时删除。

此处有更多详细信息：https://kolaberate.com/Articles/2019/08/29/implementing-batch-mode-using-kendo-upload-control-for-asp-net-core/

Kendo MVC上传 - 批量上传

2 个答案: