asp.net에서 ajax jquery를 사용하여 데이터가 삽입되지 않았습니다. MVC

Question

Jquery와 함께 ajax를 사용하여 데이터베이스에 데이터를 삽입하려고합니다. 내 데이터는 아약스없이 완벽하게 삽입되지만 아약스를 사용하면 이미지에 문제가있는 것입니다. post 메소드의 컨트롤러에서 파일을 null로 가져옵니다.

이것은보기의 내 양식입니다.

<form id="InsertForm" name="InsertForm" enctype="multipart/form-data"> 
    <div class="form-group"> 
     <label for="Name">Name</label> 
     <input type="text" class="form-control" name="StudentName" id="name" /> 
    </div> 
    <div class="form-group"> 
     <label for="LastName">Last Name</label> 
     <input type="text" class="form-control" name="StudentLastName" id="last" /> 
    </div> 
    <div class="form-group"> 
     <label for="Address">Address</label> 
     <input type="text" class="form-control" name="StudentAddress" id="address" /> 
    </div> 
    <div class="form-group"> 
     <label for="Gender">Gender</label> 
     <input type="text" class="form-control" name="Gender" id="gender" /> 
    </div> 
    <div class="form-group"> 
     <label for="Image">Image</label> 
     <input type="file" class="form-control" id="StudentImage" name="StudentImage" /> 
    </div> 

    <button id="saveclick" type="submit" name="save">Save</button> 
</form> 

이것은 이미지가있는 데이터 삽입을위한 내 스크립트입니다.

<script> 
    $(document).ready(function() { 
    $("#saveclick").click(function (e) { 
     var student = { 
     StudentName: $("#name").val(), 
     StudentLastName: $("#last").val(), 
     StudentAddress: $("#address").val(), 
     Gender: $("#gender").val(), 
     StudentImage: $("#StudentImage").val().split('\\').pop() 
     }; 

     //var formdata = new FormData($('InsertForm').get(0)); 
     //var Student= $("#InsertForm").serialize(); 

     var jsonData = JSON.stringify(student); 
     alert(jsonData); 

     $.ajax({ 
     type: "POST", 
     url: '@Url.Action("Insert", "Student", null)',// Insert Action Method in Student Controller. 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     enctype: 'multipart/form-data', 
     data: jsonData, 
     success: function (data) { 
      if (data.success) { 
      alert(data.message); 
      } 
     }, 
     error: function (xhr) { 
      alert('error'); 
     } 
     }); 
     return false; 
    }); 
    }); 
</script> 

이 학생 컨트롤러 내 컨트롤러 조치 방법입니다.

[HttpPost] 
public JsonResult Insert(Student student) 
{ 

    if (ModelState.IsValid) 
    { 
     Student stu = new Student(); 
     stu.StudentName = student.StudentName; 
     stu.StudentLastName = student.StudentLastName; 
     stu.StudentAddress = student.StudentAddress; 
     stu.Gender = student.Gender; 
     HttpPostedFileBase file = Request.Files["StudentImage"]; 
     file.SaveAs(HttpContext.Server.MapPath("~/Images/") + file.FileName); 
     stu.StudentImage = file.FileName; 
     db.Students.Add(stu); 
     db.SaveChanges(); 
     return Json(student); 
    } 
    else 
    { 
     ModelState.AddModelError("", "Inavlid Data Inserted"); 
    } 
    return Json(student); 
} 

이 문제를 해결해 주셔서 감사합니다. 여기

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#saveclick").click(function (e) { 
    var data = new FormData(); 
    var files = fileUpload.files; 
    fileData.append("StudentImage", files[0]); 
    fileData.append("StudentName",$("#name").val()); 
    /* add all values as above one by one for LastName,Gender,Address*/ 

     $.ajax({ 
     type: "POST", 
     url: '@Url.Action("Insert", "Student", null)',// Insert Action Method in Student Controller. 
     contentType: "application/json; charset=utf-8", 
     processdata: false, 
     data: data, 
     type:"POST" 
     success: function (data) { 
      if (data.success) { 
      alert(data.message); 
      } 
     }, 
     error: function (xhr) { 
      alert('error'); 
     } 
     }); 
     return false; 
    }); 
    }); 
</script> 

Answer 1

시도는 내 큰 문제를 해결 솔루션입니다. ForamData를 변수에 추가해야합니다.

<script> 
    $(document).ready(function() { 
     $("#saveclick").click(function (e) { 
      // Create FormData object 
      var fileData = new FormData(); 
      var fileUpload = $("#StudentImage").get(0); 
      var files = fileUpload.files; 

      // Looping over all files and add it to FormData object 
      //for (var i = 0; i < files.length; i++) { 
      // fileData.append(files[i].name, files[i]); 
      //} 
      fileData.append("StudentImage", files[0]); 
      fileData.append("StudentName", $("#name").val()); 
      fileData.append("StudentLastName", $("#last").val()); 
      fileData.append("StudentAddress", $("#address").val()); 
      fileData.append("Gender", $("#gender").val()); 


      $.ajax({ 
       type: "POST", 
       url: '@Url.Action("Insert", "Student", null)', 
       data: fileData, 
       processData: false, 
       contentType: false, 
       success: function (data) { 
        if (data.success) { 
         alert(data.message); 
        } 
       }, 
       error: function (xhr) { 
        alert('error'); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 

Answer 2

다음