如何使用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" })){&nbsp; &nbsp;@Html.AntiForgeryToken()&nbsp; &nbsp;<div class="div-file">&nbsp; &nbsp; &nbsp; <input id="inputFile" title="Upload a business image" type="file" name="UploadedFile" accept="image/*" onchange="encodeImagetoBase64(this)"/>&nbsp; &nbsp;</div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <p id="pImageBase64"></p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <img id="image" height="150">&nbsp; &nbsp; </div>&nbsp; &nbsp;<div class="div-input">&nbsp; &nbsp; &nbsp;@Html.Label("Name:", htmlAttributes: new { @for = "txtName" })&nbsp; &nbsp; &nbsp;@Html.EditorFor(model => model.Employee.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })&nbsp; &nbsp;</div>&nbsp; &nbsp;<div class="div-input">&nbsp; &nbsp; &nbsp;@Html.Label("Age:", htmlAttributes: new { @for = "txtAge" })&nbsp; &nbsp; &nbsp;@Html.EditorFor(model => model.Employee.Age, new { htmlAttributes = new { @class = "form-control", @id = "txtAge" } })&nbsp; &nbsp;</div>&nbsp; &nbsp;<div class="div-input">&nbsp; &nbsp; &nbsp; @Html.Label("Company:", htmlAttributes: new { @for = "txtCompany" })&nbsp; &nbsp; &nbsp; @Html.EditorFor(model => model.Business.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })&nbsp; </div>&nbsp; <div class="div-input">&nbsp; &nbsp; &nbsp; &nbsp;@Html.Label("Phone:", htmlAttributes: new { @for = "txtPhone" })&nbsp; &nbsp; &nbsp; &nbsp;@Html.EditorFor(model => model.Business.Phone, new { htmlAttributes = new { @class = "form-control", @id = "txtPhone" } })&nbsp; </div>&nbsp; <div class="text-center">&nbsp; &nbsp; &nbsp;<input type="button" id="btnRegister" value="Register" class="btn btn-default" />&nbsp; &nbsp;</div>}脚本：@section Scripts {&nbsp; &nbsp; <script type="text/javascript" language="javascript">&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#btnRegister").on('click', function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var imagenBase64 = $("#pImageBase64").html();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var name = $("#txtName").val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var age= $("#txtAge").val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var params = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; file: imagenBase64,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: name,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; age: age&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '@Url.Action("Create", "Register")',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;traditional: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data: params,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ContentType: "application/json;utf-8",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;cache: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;success: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert(response.responseText);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; function encodeImagetoBase64(element) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var file = element.files[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onloadend = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#image").attr("src", reader.result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#pImageBase64").html(reader.result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(file);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>}控制器：public ActionResult Create(string file, string name, string age){&nbsp; return Json("success!!!");}

Answer 2

请这样做，尝试使用表单集合：@section Scripts {&nbsp; &nbsp; <script type="text/javascript" language="javascript">&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#btnRegister").on('click', function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var image = document.getElementById("inputFile").files[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var frmRegister = $("#frmRegister").serialize();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var formData = new FormData();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formData.append("imageFile", image );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formData.append("RegisterData", frmRegister);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '@Url.Action("Create", "Register")',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;traditional: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data: formData,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;processData: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ContentType: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;cache: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;success: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert(response.responseText);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>}和改变行动方法根据这个：[HttpPost]&nbsp; &nbsp; &nbsp; &nbsp; public ActionResult Create()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; string serializedRegisterData = Request["RegisterData"]; //you can do code of deserialization for form data.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var image= Request.Files[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var imagePath = Path.GetFileName(image.FileName);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return Json("");&nbsp; &nbsp; &nbsp; &nbsp; }