时间戳

首页 > 解决方案 > 有没有办法在单击自定义按钮之前上传文件，然后使用 ajax 将其发送到控制器操作方法？

javascript - 有没有办法在单击自定义按钮之前上传文件，然后使用 ajax 将其发送到控制器操作方法？

问题描述

我对 Telerik Html Kendo 很陌生。我的目标是先上传文件。然后，通过 ajax 在“管理”控制器中调用相应的操作方法，该方法应在单击“提交”按钮时获取上传的文件和其他参数，如下图所示。

大多数 Telerik 示例显示了异步上传功能，该功能调用控制器方法来上传文件。我不想这样做。

但是，我尝试使用 kendo 上传的 onSelect 事件上传文件。它显示文件被包含但它不上传。

结果，我看不到任何信息。关于 onSuccess 和 onComplete 事件中上传的文件。我在“提交”按钮单击时使用了 formData。但是，我一直在 action 方法中收到 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>

这是我要调用的所有 js 事件的 javascript 代码。

<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.log("Upload :: " + getFileInfo(e));
        }
        function onSuccess(e) {

            console.log(files[0].name);
            _files = e.files[0];
        }
        function onProgress(e) {
            console.log("Upload progress :: " + e.percentComplete);
        }
        function onComplete(e) {
            console.log("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("");
        }

标签： javascripthtmlasp.net-mvckendo-uitelerik

解决方案

这是我之前用于从剑道上传小部件手动上传的一些代码。根据您的问题，我认为您正在寻找的是正确获取控制器端信息的方法。但是，我将添加我使用过的代码，它应该可以帮助你。（我的代码上传PDF） 

@(Html.Kendo().Upload()
    .Name("pdf-file")
    .Multiple(false)
    .Validation(v => v.AllowedExtensions(new string[] { "pdf" }))
    .Events(ev => ev.Select("pdfSelected"))
)

function pdfSelected(e) {
    if (e.files != null && e.files.length > 0 && e.files[0] != null) {
        var file = e.files[0];

        if (file.validationErrors != null && file.validationErrors.length > 0) {
            return; //These errors will show in the UI
        }

        var formData = new FormData();
        formData.append('PdfFile', file.rawFile);
        formData.append('AdditionalValue', 'Some String');

        $.ajax({
            type: 'post',
            url: '[SOMEURL]',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: pdfUploaded
        });
    }
}

function pdfUploaded(data) {
    //Whatever you want.
}

pdfSelected 内部是实际发布文件的代码。如果您想与其他属性同时完成所有操作，请通过提交按钮。然后而不是在那里执行上传。除了验证上传之外什么都不做，或者不实施 pdfSelected 并等到单击提交以执行验证（可能更好）。然后在您的按钮上单击

//Or course check files.length to avoid errors. Not added to keep it short
var files = $('#pdf-file').data('kendoUpload').getFiles();
var file = files[0];

一切都来自“var formData = new FormData();” 下来，从上面的代码看还是一样的。这是控制器代码。

public ActionResult MyAction() {
    string additionalValue = (string) this.Request.Form["AdditionalValue"];
    HttpPostedFileBase file = this.Request.Files["PdfFile"];

    //Do whatever you need to with them.
}

文件的 rawFile 属性不仅仅是文件对象，因为它是剑道特有的。

推荐阅读