MVC5 - 如何使用 jquery ajax 将文件上传与模型一起传递给控制器答案

【问题标题】：MVC5 - How to pass fileupload along with model to controller using jquery ajaxMVC5 - 如何使用 jquery ajax 将文件上传与模型一起传递给控制器
【发布时间】：2015-03-31 10:50:43
【问题描述】：

我需要使用 jquery ajax 将我的上传文件传递给我的控制器。

JS：

$('#btnpopupreg').click(function () {
        $.ajax({
            type: 'POST',
            url: '/Membership/Register',
            data: $('#frmRegister').serializeArray(),
            dataType: 'json',
            headers: fnGetToken(),
            beforeSend: function (xhr) {

            },
            success: function (data) {
                //do something
            },
            error: function (xhr) {

            }
        })
})

查看：

@model Test.RegisterViewModel

@{
       using Html.BeginForm(Nothing, Nothing, FormMethod.Post, New With {.id = "frmPopUpRegister", .enctype = "multipart/form-data"})
}

<input type="file" />
//rest of my strongly typed model here
<input type="button" value="BUTTON" />
//rest of the code here

控制器：

[HttpPost()]
[AllowAnonymous()]
[ValidateAntiForgeryToken()]

public void Register(RegisterViewModel model)
{

    if (Request.Files.Count > 0) { //always 0

    }

    if (ModelState.IsValid) {
          //do something with model
    }
}

我可以很好地获取模型值，但 Request.Files 总是返回 null。我也尝试过使用 HttpPostedFileBase 但它也总是返回 null

[HttpPost()]
[AllowAnonymous()]
[ValidateAntiForgeryToken()]

public void Register(RegisterViewModel model, HttpPostedFileBase files)
{
    //files always null

    if (ModelState.IsValid) {
          //do something with model
    }
}

【问题讨论】：

这个链接可能会回答你的问题[点击这里][1] [1]：stackoverflow.com/questions/2320069/jquery-ajax-file-upload

标签： c# jquery ajax asp.net-mvc

【解决方案1】：

首先，您需要为文件控制提供name 属性，以便它可以将值回传到您的控制器

<input type="file" name="files" /> //

然后序列化您的表单和相关文件

var formdata = new FormData($('form').get(0));

然后发回

$.ajax({
  url: '@Url.Action("Register", "Membership")',
  type: 'POST',
  data: formdata,
  processData: false,
  contentType: false, 
  success: function (data) {
    ....
  }        
});

还要注意文件输入需要在表单标签内

【讨论】：

不工作，它甚至没有击中我的控制器。如果我删除 processData 和 contentType，它可以工作，但文件仍然为空。
它确实有效（检查网址是否正确）。您的代码肯定有其他问题 - 您的视图表明表单中甚至没有任何控件。
是否可以做同样的事情，但在 RegisterViewModel 模型中有 HttpPostedFileBase？
@smoksnes，当然，这是首选的方式。

【解决方案2】：

您需要使用FormData 结合contentType，processData 设置为false：

    var formData = new FormData();
        formData.append("userfile", $('#frmRegister input[type="file"]')[0].files[0]);
        // append the file in the form data
    $.ajax({
      type: 'POST',
      url: '/Membership/Register',
      data: formdata, // send it here
      dataType: 'json',
      contentType:false, // this
      processData:false, // and this should be false in case of uploading files
      headers: fnGetToken(),
      beforeSend: function(xhr) {

      },
      success: function(data) {
        //do something
      },
      error: function(xhr) {

      }
    })

【讨论】：

这段代码不是只会将上传的文件发送到我的控制器吗？模型怎么样？

【解决方案3】：

<input type="file" id="LogoImage" name="image" />
<script>

var formData = new FormData($('#frmAddHotelMaster').get(0));

var file = document.getElementById("LogoImage").files[0];

formData.append("file", file);


        $.ajax({
            type: "POST",
            url: '/HotelMaster/SaveHotel',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
                swal({
                        title: "Good job!",
                        text: "Data Save successfully!",
                        type: "success"
                    });
                    $('#wrapper').empty();
                    $('#wrapper').append(htmlData);
            },
            error: function (error) {
                alert("errror");
            }
        });
</script>

public ActionResult SaveHotel(HotelMasterModel viewModel, HttpPostedFileBase file)
{

            for (int i = 0; i < Request.Files.Count; i++)
            {
                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/App_Data/"), fileName);
                file.SaveAs(path);
            }
return View();
}

【讨论】：