MVC5 - 如何文件上传通过与模型使用jQuery AJAX到控制器

问题描述

我需要使用jQuery AJAX我上传的文件传递给我的控制器。

记者：

  $（'＃btnpopu preG）。点击（函数（）{
        $阿贾克斯（{
            键入：POST，
            网址：'/会员/注册，
            数据：$（'＃frmRegister'）serializeArray（），。
            数据类型：JSON，
            标题：fnGetToken（）
            beforeSend：功能（XHR）{

            }，
            成功：功能（数据）{
                //做一点事
            }，
            错误：函数（XHR）{

            }
        }）
}）
 

查看：

  @model Test.RegisterViewModel

@ {
       使用Html.BeginForm（没什么，没什么，FormMethod.Post，新增功能{.ID =frmPopU pregister，.enctype =的multipart / form-data的}）
}

＆LT;输入类型=文件/＆GT;
//其余的我强类型的模型在这里
＆LT;输入类型=按钮值=按钮/＆GT;
//其余的code在这里
 

控制器：

  [HttpPost（）]
[使用AllowAnonymous（）]
[ValidateAntiForgeryToken（）]

公共无效寄存器（RegisterViewModel模型）
{

    如果（Request.Files.Count大于0）{//总是0

    }

    如果（ModelState.IsValid）{
          //做一些与模型
    }
}
 

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

  [HttpPost（）]
[使用AllowAnonymous（）]
[ValidateAntiForgeryToken（）]

公共无效寄存器（RegisterViewModel模型，HttpPostedFileBase文件）
{
    //文件总是空

    如果（ModelState.IsValid）{
          //做一些与模型
    }
}
 

解决方案

首先，你需要给你的文件控制名称属性，因此它可以值回发到您的控制器

 ＆LT;输入类型=文件名称=文件/＆GT; //
 

然后序列化的形式和相关的文件（S）

  VAR FORMDATA =新FORMDATA（$（'表'）得到（0））;
 

和后回来

  $。阿贾克斯（{
  网址：@ Url.Action（注册，会员），
  键入：POST，
  数据：FORMDATA，
  过程数据：假的，
  的contentType：假的，
  成功：功能（数据）{
    ....
  }
}）;
 

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

I need to pass my upload file to my controller using 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) {

            }
        })
})

View:

@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

Controller:

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

public void Register(RegisterViewModel model)
{

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

    }

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

I can get the model value just fine but Request.Files always returns null. I also tried using HttpPostedFileBase but it also always return null

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

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

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

解决方案

First you need to give you file control a name attribute so it can post back a value to your controller

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

Then serialize your form and the associated file(s)

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

and post back with

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

Note also the file input needs to be inside the form tags

这篇关于MVC5 - 如何文件上传通过与模型使用jQuery AJAX到控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！