Kendo MVC 上传 - 批量上传答案

【问题标题】：Kendo MVC Upload - Batch UploadKendo MVC 上传 - 批量上传
【发布时间】：2014-10-03 06:16:29
【问题描述】：

我正在使用 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))

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

这是模板代码。

<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 代码，它收集每个文件的开始和结束日期，并构造一个 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 个不同的请求被触发到控制器操作，而不是 1 个。我确定我没有直接看到任何东西，并感谢任何展示和讲述。

【问题讨论】：

我已经将整个事情简化了很多，但行为仍然不如预期。这是一个非常简单的上传控件，尝试将多个文件作为一个批次上传。 Html.Kendo().Upload().Name("filesTest").Async(a => a.Save("UploadTest", "Home").AutoUpload(false).Batch(true))
我使用的是 Kendo.MVC 版本 - 2014.2.716.545

标签： asp.net-mvc kendo-ui kendo-asp.net-mvc kendo-upload

【解决方案1】：

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

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

更多细节在这里 - http://www.telerik.com/forums/batch-mode---not-working

【讨论】：

【解决方案2】：

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

【讨论】：