如何在mvc中使用ajax插入图像

Question

我想在我的图片文件夹中上传图片，现在我的图片插入表格而不是图片文件夹

Controller.cs

        [HttpPost]
        public ActionResult Create(student student, HttpPostedFileBase file)
        {
            if (ModelState.IsValid)
            {
                if (file != null)
                {
                    file.SaveAs(HttpContext.Server.MapPath("~/Images/")
                                                  + file.FileName);
                    student.studentimage = file.FileName;
                }

                InsAjaxEntities.students.Add(student);
                InsAjaxEntities.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(student);
        }

create.cshtml

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
            <div class="row">
                <div class="form-group col-lg-10">
                    <label class="control-label col-lg-2"><strong>StudentImage:</strong></label>
                    <input type="file" id="studentimage" />
                </div>
            </div>

}
@section scripts {
    <div>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

        $('#button').click(function () {
                    

                    var stud = {

                         studentimage: $('#studentimage').val()

                    };

                    $.ajax({
                        url: '/Home/Create',
                        data: JSON.stringify(stud),
                        dataType: "json",
                        type: 'POST',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            debugger
                            alert('success', data);
                        },
                        error: function (x, y, z) {                           
                            debugger
                        }
                    });

表格

 public string studentimage { get; set; }

以这种方式查看我的图像存储：

我正在使用ajax将图像存储在文件夹中，但图像不存储在文件夹中

我的图像没有存储在我想要存储在文件夹中的文件夹中？

如何在文件夹中存储图片？

我想将图像存储在正确的路径而不是假路径中？

Answer 1

1-如果你想用 ajax 上传图片，你应该在 java 脚本中使用 FormData，如下所示：

 $('#button').click(function () {
                   var data = new FormData();
                    data.append('file',$('#studentimage')[0].files[0]);
                   //add student values too like: data.append('name',$('#name').val());
                    $.ajax({
                        url: '/Home/Create',
                        data: data,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        success: function (data) {
                            debugger
                            alert('success', data);
                        },
                        error: function (x, y, z) {                           
                            debugger
                        }
                    });
});

2- 在您的控制器中的此更改文件不应为空之后，您可以以正确的方式保存它，我建议为此按年和月创建文件夹

3- 如果你想在一些你应该使用的地方显示图像

function previewFile() {
  const preview = document.querySelector('img');
  const file = $('#studentimage')[0].files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // convert image file to base64 string
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}