Javascript 在asp.net MVC中，使用ajax jquery不会将图像与数据一起插入

我正在尝试使用ajax和Jquery将数据插入数据库。我的数据是在没有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 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>

$（文档）.ready（函数（）{
$（“#保存单击”）。单击（函数（e）{
var data=new FormData（）；
var files=fileUpload.files；
追加（“StudentImage”，文件[0]）；
append（“StudentName”，$（“#name”）.val（）；
/*为姓氏、性别、地址逐个添加上述所有值*/
$.ajax({
类型：“POST”，
url:'@url.Action（“插入”，“学生”，null）”，//在学生控制器中插入操作方法。
contentType:“应用程序/json；字符集=utf-8”，
processdata:false，
数据：数据，
类型：“职位”
成功：功能（数据）{
if（data.success）{
警报（数据、消息）；
}
},
错误：函数（xhr）{
警报（“错误”）；
}
});
返回false；
});
});

以下是解决我的大问题的解决方案。我们需要在任何变量中追加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>

$（文档）.ready（函数（）{
$（“#保存单击”）。单击（函数（e）{
//创建FormData对象
var fileData=new FormData（）；
var fileUpload=$（“#StudentImage”）.get（0）；
var files=fileUpload.files；
//循环所有文件并将其添加到FormData对象
//对于（var i=0；i

您只对返回的数据发出了

警报

？你从来没有真正插入过…不，凯兰，这不是问题所在。如果表单中有文件输入，就不能使用json.stringify。您应该使用var data=new FormData（）；并将所有键值添加到此文件中，然后通过AJAX发送。如果需要代码，请告诉我

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

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