如何将图像文件和表单数据从Ajax传递到MVC控制器

Question

我有一个包含Image和另一个文件的表单，我想在控制器中发送包含Image的数据。

  <form id="first-form"  method="post" enctype="multipart/form-data">
   <div class="row">
      <div class="col-md-9">
       <div class="row">
        <div class="col-sm-6 form-group">
         @Html.Label(@RegisterResource.Name, new { @class = "control-label" })
         <div class="field-input">
         @Html.TextBox("Name", null, new { placeholder = @RegisterResource.Name, autofocus = "autofocus", @class = "input-text" })
         @Html.ValidationMessage("Name", null, new { @class = "text-danger" })
        </div>
       </div>
      <div class="col-sm-6 form-group">
        @Html.Label(@RegisterResource.Family, new { @class = "control-label" })
         <div class="field-input">
         @Html.TextBox("Family", null, new { placeholder = @RegisterResource.Family, @class = "input-text" })
         @Html.ValidationMessage("Family", null, new { @class = "text-danger" })
        </div>
       </div>
       </div>
       <div class="row">
        <div class="col-sm-6 form-group">
          @Html.Label(@RegisterResource.CellPhone, new { @class = "control-label" })
           <div class="field-input">
           @Html.TextBox("CellPhone", null, new { placeholder = @RegisterResource.CellPhone, maxlength = 11, @class = "input-text", onkeydown = "return ValidateNumber(event);" })
            @Html.ValidationMessage("CellPhone", null, new { @class = "text-danger" })
           </div>
          </div>
          <div class="col-sm-6 form-group">
            @Html.Label(@ContractorResource.City, new { @class = "control-label" })
          <div class="field-input">
            @Html.DropDownList("CityId", (SelectList)ViewBag.City, new { placeholder = @ContractorResource.City, @class = "input-text" })
            @Html.ValidationMessage("CityId", null, new { @class = "text-danger" })
          </div>
         </div>
        </div>
        </div>
        <div class="col-md-3 text-center">
          <img id="image_upload_preview" class="img-circle" src="~/Content/Images/contractor-avator.png" />
          <br />
          <input type="file" id="inputFile" style="max-width: 200px" />
          <label for="inputFile" class="btn-2">انتخاب فایل تصویر</label>
         </div>
         </div>
         <div class="order-complate text-center">
         <button type="submit" class="awe-btn awe-btn-1 awe-btn-medium" id="user-register-btn" data-loading-text="<i class='fa fa-spinner fa-spin '></i> @PageResource.ConfirmCode">@PageResource.Continues</button>
         </div>
    </form>

和在jquery中

function readURL(input) {
 if (input.files && input.files[0]) {
   var reader = new FileReader();
   reader.onload = function(e) {
     $('#image_upload_preview').attr('src', e.target.result);
 }

 reader.readAsDataURL(input.files[0]);
 fileImage = input.files[0];
     }
}

$("#inputFile").change(function() {
  readURL(this);
});

submitHandler: function() {
  $("#user-register-btn").button('loading');
  var data = $('#first-form').serialize();
  var formData = new FormData();  
  formdata.append("img", fileImage );             
  $.post("/Contractor/SendConfirmCode",
   data,
    function(result) {
     } 
    else {
     }
   },
  "json");

但是在控制器中，Request.Files是Empty。

Answer 1

您需要更改脚本来上传图像。