我正在尝试使用 ajax 调用将上传的文件从视图发送到控制器，但该文件在控制器中被接收为 null

Question

我使用 ajax 将上传的文件从 html 视图发送到控制器，但该文件在控制器中被接收为空。

我尝试使用 FormData 但没有任何反应，或者可能我没有正确使用它，当我使用 html.BeginForm() 发送文件时，它在控制器中正确读取，但我不想使用表单，因为它在提交后打开另一个页面

下面是我的控制器

public void Upload_SCN_CA_File(FormCollection formCollection)

{

    if (Request != null)

    {

        HttpPostedFileBase file = Request.Files["UploadedFile"];

        if ((file != null) && (file.ContentLength > 0) && !string.IsNullOrEmpty(file.FileName)) 

        {

            string fileName = file.FileName;

            Debug.WriteLine(fileName);

            string fileContentType = file.ContentType;

            byte[] fileBytes = new byte[file.ContentLength];

            var data = file.InputStream.Read(fileBytes, 0, Convert.ToInt32(file.ContentLength));

        }

    }

}

下面是 JQuery ajax 调用

$("#upload").on("click",function () {

    $.ajax({

        type: "POST",

        url: "/Order/Upload_SCN_CA_File",

        data: {

            enctype: 'multipart/form-data'

        },

        success: function (response) {

            if (response.result == false) {

                swal("Error", response.message, "error");

            }

            else {

                swal("Success", response.message, "success");

            }

        }

    });

});

下面是我的 html 视图

<form>

    <div class="row">

        <div class="col">

            <input name="UploadedFile" id="upfile" type="file" />

        </div>

    </div>

    <div class="row">

        <div class="col">

            <div class="btn btn-primary rounded" id="upload" style="margin:8px">Upload</div><br>

        </div>

    </div>

</form>

我希望文件能够正确发送到控制器，以便我可以正确读取它，但它被接收为空

Answer 1

您可以传递类似于以下代码的数据。&nbsp; &nbsp;$("#form0").submit(function (event) {&nbsp; &nbsp; &nbsp; &nbsp; var dataString;&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; event.stopImmediatePropagation();&nbsp; &nbsp; &nbsp; &nbsp; var action = $("#form0").attr("action");&nbsp; &nbsp; &nbsp; &nbsp; if ($("#form0").attr("enctype") == "multipart/form-data") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataString = new FormData($("#form0").get(0));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processData = false;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // regular form, do your own thing if you need it&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: action,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: dataString,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: contentType,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processData: processData,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function (jqXHR, textStatus, errorThrown) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });

Answer 2

您必须使用FormData API在请求中传递表单内容。您可以在点击处理程序中像这样收集它const form = $(this).closest('form').get(0)const data = new FormData(form)然后将以下内容传递给ajax调用data: data,processData: false,contentType: false代替data: {    enctype: 'multipart/form-data'},processData: false使 jquery 将未经修改的 FormData 实例传递给 XHR，这是文件上传正常工作所必需的。contentType: false将使浏览器multipart/form-data自动设置内容类型。FormData 现在可以在较旧的浏览器中运行，特别是 IE<10。