Json清除文件對象

Question

我正面臨一個問題。

我需要通過Ajax調用將一些信息和一個文件傳遞給控制器​​。

型號如下：

public class PersonModel 
    { 
     [Display(Name ="Full Name")] 
     public string Name { get; set; } 
     [Display(Name ="Email Id")] 
     [DataType(DataType.EmailAddress)] 
     public string email { get; set; } 
     public string PhotoPath { get; set; } 
     [Display(Name = "Upload Photo")] 
     [DataType(DataType.Upload)] 
     public HttpPostedFileBase Photo { get; set; } 
    } 

我的控制器如下：

public class EmployeeController : Controller 
    { 
     // GET: Employee 
     public ActionResult Index() 
     { 
      return View(); 
     } 
     [HttpPost] 
     public ActionResult Index(PersonModel P) 
     { 
      return View(); 
     } 
    } 

觀點：

@model FileCurdoperation.Models.PersonModel 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

@using (Html.BeginForm("Index", "Employee", FormMethod.Post, new { enctype = "multipart/form-data", name = "blogform", id = "blogform" })) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>PersonModel</h4> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.email, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Photo, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Photo, new { type = "file",@class = "form-control" })*@ 
       <input type="file" id="Photo" name="Photo" /> 
       @Html.ValidationMessageFor(model => model.Photo, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="button" value="Create" onclick="UpdateDetails();" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 
<script> 
    function UpdateDetails() { 
     debugger; 
     var image = $('#Photo').get('0').files[0]; 
     var param = { "Name": $('#Name').val().trim(), "email": $('#email').val().trim(), "Photo": $('#Photo').get('0').files[0] }; 
     param = JSON.stringify(param); 
     $.ajax({ 
      type: "Post", 
      url: "/Employee/Index", 
      contentType: "application/json; charset=utf-8", 
      data: param, 
      dataType: "json", 
      success: function (data) { 
      }, 
      error: function (response) { 
      } 
     }); 
    }; 
</script> 

我需要通過名稱，電子郵件和照片到控制器。

如果按鈕類型提交，它按預期工作。

但我的要求是，我應該使用Ajax調用。

param = JSON.stringify（param）;

在這行文件變得清晰。

轉換JSON

請幫我之後..

Answer 1

使用FormData發送數據

function UpdateDetails() { 
    var file_data = $('#Photo').get('0').files[0]; 
    var fd = new FormData(); 
    fd.append("Photo", file_data); 
    fd.append("email", $('#email').val().trim()); 
    fd.append("Name", $('#Name').val().trim()); 
    $.ajax({ 
     url: "/Home/Test", 
     method: "POST", 
     contentType: false, 
     processData: false, 
     data:fd, 
     success: function (data) { 
     }, 
     error: function (response) { 
     } 
    }); 
};