Есть ли способ загрузить файл перед нажатием пользовательской кнопки, а затем с помощью ajax отправить его в метод действия контроллера?

Я новичок в Telerik Html Kendo. Моя цель - сначала загрузить файл. Затем вызовите соответствующий метод действия в контроллере «Администрирование» через ajax, который должен принять загруженный файл и другие параметры при нажатии кнопки «Отправить», как показано на изображении ниже.

Большинство примеров Telerik демонстрируют функцию асинхронной загрузки, которая вызывает метод контроллера для загрузки файла. Я не хочу так поступать.

Однако я попытался загрузить файл с событием onSelect загрузки кендо. Он показывает, что файл включается, но не загружается.

В результате я не могу видеть никакой информации. о загруженном файле в событии onSuccess и onComplete. Я использовал formData при нажатии кнопки «Отправить». Однако я все время получаю null в методе действия.

Любой правильный способ сделать это?

Вот мой html-код для загрузки файла:

<div class = "well well-sm" style = "width:inherit;text-align: center;float:left;">
            <!--form method = "post"-->
                <!--div class = "demo-section k-content">
                    <input name = "files" id = "files" type = "file" value = "Upload a Data File"/>
                </div-->
            <!--/form-->
            @(Html.Kendo().Upload()
        .Name("files")
        .Multiple(false)
        .Messages(m => m.Select("Please upload a Data File"))
        .HtmlAttributes(new { aria_label = "file" })
        .Events(events => events
                .Complete("onComplete")
                .Select("onSelect")
                .Success("onSuccess")
                .Upload("onUpload")
                .Progress("onProgress"))
        //.Async(a=>a.AutoUpload(false))
        .Validation(v => v.AllowedExtensions(new string[] { ".csv", ".xls", ".xlsx", ".txt" }))
        )
        </div>

Вот код javascript для всех событий js, которые я хочу вызвать.

<script>


   var _files;
        function onSelect(e) {
            var files = e.files;
            alert(files[0].name);
            _files = files[0];
            //file = files[0].name;
                var acceptedFiles = [".xlsx", ".xls", ".txt", ".csv"]
                var isAcceptedFormat = ($.inArray(files[0].extension, acceptedFiles)) != -1

            if (!isAcceptedFormat) {
                e.preventDefault();
                $("#meter_addt_details").addClass("k-state-disabled");
                //$("#submit_btn").addClass("k-state-disabled");
                document.getElementById("submit_btn").disabled = true;
                alert("Please upload correct file. Valid extensions are xls, xlsx,txt,csv");
            }
            else {
/* Here I tried to upload file didn't work out */
                $("#meter_addt_details").removeClass("k-state-disabled");
               // $("#submit_btn").removeClass("k-state-disabled");
                document.getElementById("submit_btn").disabled = false;
                @*
                $("#files").kendoUpload({
                async: {
                    saveUrl: '@Url.Action("ReadMeterFile","Administration")',
                    autoUpload: false
                    }
                }); *@
                $("#files").kendoUpload();
                //$(".k-upload-selected").click();
                @*var upload = $("#files").data("kendoUpload");
                upload.upload(); *@
            }
        }
        @*
        function onUpload(e) {
            $(".k-upload-selected").trigger('click');
            //console.info("Upload :: " + getFileInfo(e));
        }
        function onSuccess(e) {

            console.info(files[0].name);
            _files = e.files[0];
        }
        function onProgress(e) {
            console.info("Upload progress :: " + e.percentComplete);
        }
        function onComplete(e) {
            console.info("Complete");
        }
        function onSubmitButtonClick(e) {

            var formData = new FormData();
            alert(_files.name);
            formData.append('files', _files);
            formData.append('order_num', $("#order").val());
            formData.append('purchase_order', $("#purchase_order").val());
            $.ajax({
                url: '@Url.Action("ReadFile","Administration")', 
                data: formData,
                type: 'POST',
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    alert("Good");
                }
            });     
        }
    </script>

Вот мой контроллер:

public ActionResult ReadFile(IEnumerable<HttpPostedFileBase> files,string order_num, string purchase_order)
        {
            System.Diagnostics.Debug.WriteLine("File length:"+files.ToList().Capacity);
            foreach(var f in files)
            {
                System.Diagnostics.Debug.WriteLine(f.FileName);
                var fileName = Path.GetFileName(f.FileName);
                var destinationPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

                f.SaveAs(destinationPath);
            }
            //System.Diagnostics.Debug.WriteLine(file);
            /*
            System.Diagnostics.Debug.WriteLine("File:"+files);
            System.Diagnostics.Debug.WriteLine("Order:"+order_num);
            System.Diagnostics.Debug.WriteLine("Purchase Order:"+purchase_order);
            return Content("");
        }