Kendo upload using Ajax Post 在MVC core中上传文件

Question

我已经使用kendo upload 在MVC 核心中使用Ajax Post 上传文件。我可以调用 API url 但数据为空。我是否正确传递了数据？这是我的代码。

<form id="uploadForm" action='@Url.Action("UploadFile", new { RmclientAccid = "1"  , AsAtDate = "testdate"})' method="post">
        @(Html.Kendo().Upload()
                        .HtmlAttributes(new { aria_label = "files" })
                        .Name("fileUpload")
        )
        <p style="padding-top: 1em; text-align: right">
            <button type="submit" class="k-button k-primary">Submit</button>
        </p>
    </form>

$(function () {
            $("#uploadForm").submit(function (e) {
                e.preventDefault();
                var upload = $("#fileUpload").data("kendoUpload"),
                    files = upload.getFiles(),
                    myFile = files[0];
                console.log(files);
                $.ajax({
                    type: 'POST',
                    url: '/RmReportTasks/UploadFile/',
                    dataType: 'json', 
                    processData: false,
                    contentType: false,
                    data: {
                        fileUpload: files[0].rawFile,
                        RmclientAccid: "1",
                        AsAtDate: "testdate"
                    },
                    success: function (data) {
                        console.log("succcess")
                    },
                    error: function (err) {
                        console.log("failure");
                    }
                });
            });
    });

这是我的控制器。

 [HttpPost]
        public async Task<JsonResult> UploadFile(IEnumerable<IFormFile> fileUpload , string RmclientAccid, string AsAtDate)
        {
            var result = await _fileUploadManager.UploadDocument(fileUpload, RmclientAccid, AsAtDate);
            return Json(result);
        }

Answer 1

您不能直接使用 ajax 将文件发送到服务器。

$(function () {
            $("#uploadForm").submit(function (e) {
                e.preventDefault();
                var formData = new FormData();
                var totalFiles = document.getElementById("uploadForm").files.length;
                for (var i = 0; i < totalFiles; i++) {
                   var file = document.getElementById("uploadForm").files[i];
                   formData.append("uploadForm", file);
                }
                $.ajax({
                    type: 'POST',
                    url: '/RmReportTasks/UploadFile/',
                    dataType: 'json', 
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function (data) {
                        console.log("succcess")
                    },
                    error: function (err) {
                        console.log("failure");
                    }
                });
            });
    });

而在服务器端，您可以像这样接收文件。

    [HttpPost]
    public void UploadFile()
    { 
       for (int i = 0; i < Request.Files.Count; i++)
            {
                var file = Request.Files[i];

                var fileName = Path.GetFileName(file.FileName);

                // Write logic to handle file here.
            }
   }

Kendo upload using Ajax Post 在MVC core中上传文件

Kendo upload using Ajax Post to upload files in MVC core

jquery

ajax

asp.net-core

kendo-ui

kendo-upload