在ASP.NET MVC中使用Ajax jQuery图像未插入数据

Question

我正在尝试使用带有Jquery的ajax将数据插入数据库。 我的数据完全没有ajax插入，但是当我使用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);
}

谢谢，如果您解决了我这个问题。

Answer 1

尝试跟随

<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 2

这是解决我的大问题的解决方案。 我们需要将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>