我正在使用 Kendo UI MVC Upload 控件一次上传多个文件（即批量）。该文档非常清楚该怎么做，但我看到每个文件都有单独的上传请求，而不是所有文件的单一上传请求。
这是我的上传控制代码
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 个。我确定我没有直接看到任何东西，并感谢任何展示和讲述。