上传文件时Ajax调用未命中操作方法答案

【问题标题】：Ajax call not hitting action method when uploading file上传文件时Ajax调用未命中操作方法
【发布时间】：2017-06-20 19:55:10
【问题描述】：

我正在使用 MVC 应用程序，其中我使用了一个拖放文件上传，它工作正常，文件正在上传到相应的文件夹中。

下面是它使用的示例代码：

<div id="dropZone" style="width:340px; height:200px">
    <b> Drop your files here or</b> 
</div>
<img id="uploadImg" src="~/Content/images/Cloud-File.gif" alt="uploadFile" style="width:297px; height:155px; display:none" />


$('#dropZone').filedrop({
    url: '@Url.Action("UploadFiles","Home")',
    paramname: 'files',
    maxFiles: 5,
    dragOver: function () {
       //change color
    },
    dragLeave: function () {
      //change color
    },
    drop: function () {
       //change color
    },
    afterAll: function () {

    },
    uploadFinished: function (i, file, response, time)
    {
      //creating file size and showing the file name in list
    }
});

下面是它使用的控制器。

[HttpPost]
public ActionResult UploadFiles(IEnumerable files)
{
    foreach (HttpPostedFileBase file in files)
    {
      //save logic
    }
    return Json("All files have been successfully stored.");
}

直到这里一切都很好，没有问题之后我还为手动上传文件添加了一个输入文件控件。下面是用于它的 jquery ajax 调用：

$("#upload").change(function () {
    var fileInfo = $("#upload").prop('files');
    var fileData = new FormData();
    fileData.append('files',fileInfo[0])
    $.ajax({
        type: "POST",
        url: '@Url.Action("UploadFiles", "Home")',
        processData:false,
        // contentType: "application/json; charset=utf-8",
        // data: { files: fileData},
        dataType: "json",
        async:false,
        success: function (response) { UploadBrowseFile(fileInfo[0]); },
        error: function (xhr, status, error) { alert(xhr.responseText); }
    });
});

但它没有达到相同的控制器动作并且进程正在转向错误功能，由于此手动上传不起作用。需要帮助。

【问题讨论】：

您没有发送任何数据 - 它必须是 data: fileData, 并且您需要设置 contentType: false, 选项。
注意你的方法应该是public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files)
我发现了这个问题，未注释的数据参数和内容类型仍然被注释。对于动作结果方法，它使用拖放功能，然后我不需要更改它，我也必须使其与浏览文件一起使用。
您是否阅读了我的第一条评论 - 您需要进行这两项更改！
我设置了 contentType:false 但仍然没有点击 action 方法。

标签： jquery asp.net-mvc-4

【解决方案1】：

您当前没有向该方法发送任何数据（data 选项的注释代码不正确），并且您发送FormData 的contentType 选项不正确，必须设置为false（默认为'application/x-www-form-urlencoded; charset=UTF-8')。

将 ajax 选项更改为

$.ajax({
    type: "POST",
    url: '@Url.Action("UploadFiles", "Home")',
    processData:false,
    contentType: false, // change
    data: fileData, // change
    dataType: "json",
    async:false,
    success: function (response) { UploadBrowseFile(fileInfo[0]); },
    error: function (xhr, status, error) { alert(xhr.responseText); }
});

您还需要将方法的签名更改为

[HttpPost]
public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files)

【讨论】：

嗨斯蒂芬，这个解决方案对我有用。我将其标记为答案。