如何使用AJAX JQuery ASP .NET MVC 4将表单集合和文件传递到控制器

Question

我有一个模型类：public class Register{    public Employee Employee { get; set; }    public Business Business { get; set; }}我有一个HTML表单，其中包含输入类型文本，其中包含来自模型的员工和业务数据以及用于加载图像的输入类型文件：@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "frmRegister", @enctype = "multipart/form-data" })){   @Html.AntiForgeryToken()   <div class="div-file">      <input id="inputFile" title="Upload a business image" type="file" name="UploadedFile" accept="image/*" />   </div>   <div class="div-input">     @Html.Label("Name:", htmlAttributes: new { @for = "txtName" })     @Html.EditorFor(model => model.Employee.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })   </div>   <div class="div-input">     @Html.Label("Age:", htmlAttributes: new { @for = "txtAge" })     @Html.EditorFor(model => model.Employee.Age, new { htmlAttributes = new { @class = "form-control", @id = "txtAge" } })   </div>   <div class="div-input">      @Html.Label("Company:", htmlAttributes: new { @for = "txtCompany" })      @Html.EditorFor(model => model.Business.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })  </div>  <div class="div-input">       @Html.Label("Phone:", htmlAttributes: new { @for = "txtPhone" })       @Html.EditorFor(model => model.Business.Phone, new { htmlAttributes = new { @class = "form-control", @id = "txtPhone" } })  </div>  <div class="text-center">     <input type="button" id="btnRegister" value="Register" class="btn btn-default" />   </div>}问题是：如何传递图像文件？

Answer 1

显然，唯一的解决方案是将以字符串编码转换的图像传递到 base 64：

网页：

@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "frmRegister", @enctype = "multipart/form-data" }))

{

   @Html.AntiForgeryToken()

   <div class="div-file">

      <input id="inputFile" title="Upload a business image" type="file" name="UploadedFile" accept="image/*" onchange="encodeImagetoBase64(this)"/>

   </div>

    <div>

        <p id="pImageBase64"></p>

    </div>

    <div>

        <img id="image" height="150">

    </div>

   <div class="div-input">

     @Html.Label("Name:", htmlAttributes: new { @for = "txtName" })

     @Html.EditorFor(model => model.Employee.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })

   </div>

   <div class="div-input">

     @Html.Label("Age:", htmlAttributes: new { @for = "txtAge" })

     @Html.EditorFor(model => model.Employee.Age, new { htmlAttributes = new { @class = "form-control", @id = "txtAge" } })

   </div>

   <div class="div-input">

      @Html.Label("Company:", htmlAttributes: new { @for = "txtCompany" })

      @Html.EditorFor(model => model.Business.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })

  </div>

  <div class="div-input">

       @Html.Label("Phone:", htmlAttributes: new { @for = "txtPhone" })

       @Html.EditorFor(model => model.Business.Phone, new { htmlAttributes = new { @class = "form-control", @id = "txtPhone" } })

  </div>

  <div class="text-center">

     <input type="button" id="btnRegister" value="Register" class="btn btn-default" />

   </div>

}

脚本：

@section Scripts {

    <script type="text/javascript" language="javascript">

        $(document).ready(function () {

            $("#btnRegister").on('click', function (e) {

                e.preventDefault();

                var imagenBase64 = $("#pImageBase64").html();

                var name = $("#txtName").val();

                var age= $("#txtAge").val();

                var params = {

                    file: imagenBase64,

                    name: name,

                    age: age

                }

                 $.ajax({

                    url: '@Url.Action("Create", "Register")',

                    type: 'POST',

                     traditional: true,

                     data: params,

                     dataType: 'json',

                     ContentType: "application/json;utf-8",

                     cache: false,

                     success: function (response) {

                     },

                      error: function (response) {

                         alert(response.responseText);

                     }

                });

            });

        });

        function encodeImagetoBase64(element) {

            var file = element.files[0];

            var reader = new FileReader();

            reader.onloadend = function () {

                $("#image").attr("src", reader.result);

                $("#pImageBase64").html(reader.result);

            }

            reader.readAsDataURL(file);

        }

    </script>

}

控制器：

public ActionResult Create(string file, string name, string age)

{

  return Json("success!!!");

}

Answer 2

请这样做，尝试使用表单集合：

@section Scripts {

    <script type="text/javascript" language="javascript">

        $(document).ready(function () {

            $("#btnRegister").on('click', function (e) {

                e.preventDefault();

                var image = document.getElementById("inputFile").files[0];

                var frmRegister = $("#frmRegister").serialize();

                var formData = new FormData();

                formData.append("imageFile", image );

                formData.append("RegisterData", frmRegister);

                 $.ajax({

                    url: '@Url.Action("Create", "Register")',

                    type: 'POST',

                     traditional: true,

                     data: formData,

                     processData: false,

                     dataType: 'json',

                     ContentType: false,

                     cache: false,

                     success: function (response) {

                     },

                      error: function (response) {

                         alert(response.responseText);

                     }

                });

            });

        });

    </script>

}

和改变行动方法根据这个：

[HttpPost]

        public ActionResult Create()

        {

            string serializedRegisterData = Request["RegisterData"]; //you can do code of deserialization for form data.

            var image= Request.Files[0];

            var imagePath = Path.GetFileName(image.FileName);

            return Json("");

        }