jquery - 如何在 mvc 中使用 ajax 在数据库中添加图像？

Question

我是模型视图控制器的新手。我必须在 mvc 应用程序中使用 ajax 在数据库中添加 Fname、Mname、Lname 和 Image。这是我的代码。

索引.cshtml

<script>
    $(function () {

        $("#btnsend").click(function () {
            var name = $("#Fname").val();
            var file = $("#browseId").get(0).files;
            var data = new FormData;
            data.append("images", file[0]);
            data.append("Fname", $("#Fname").val());
            data.append("Mname", $("#Mname").val());
            data.append("Lname", $("#Lname").val());


            if (name == '') {
                alert("Fill all details!");
            }
            else {
                $.ajax({

                    type: "POST",
                    url: "/Home/Add_data",
                    data: data,
                    contentType: false,
                    processData: false,
                    success: function (da) {
                        alert("Record Successfully Inserted!");
                    },
                    error: function (suc) {
                        alert("Not inserted!");
                    }



                });
            }






        })



    })



</script>

注册器.cs

public class register
{

    public string Fname{get;set;}


    public string Mname { get; set; }


    public string Lname { get; set; }


    public string images { get; set; }

    public HttpPostedFileWrapper ImageFile { get; set; }
}

家庭控制器.cs

public class HomeController : Controller
{
    //
    // GET: /Home/
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

    public ActionResult Index()
    {
        return View();
    }

[HttpPost]
    public void Add_data(register rs)
    {

        try
        {
            SqlCommand com = new SqlCommand("p1", con);
            com.CommandType = CommandType.StoredProcedure;
            con.Open();
            com.Parameters.AddWithValue("@Fname", rs.Fname);
            com.Parameters.AddWithValue("@Mname", rs.Mname);
            com.Parameters.AddWithValue("@Lname", rs.Lname);
            if (rs.ImageFile != null && rs.ImageFile.ContentLength > 0)
            {

                string filename = Path.GetFileName(rs.ImageFile.FileName);
                string imagepath = Path.Combine(Server.MapPath("~/ImgFile/Images"), filename);
                rs.ImageFile.SaveAs(imagepath);
            }
            com.Parameters.AddWithValue("@img", "~/User-images/" + rs.ImageFile.FileName);
            com.ExecuteNonQuery();
            con.Close();



        }
        catch (Exception)
        {

        }

    }



}

}

这是数据库查询

create table empdata

（ studId int 非空主键标识（1,1），Fname nvarchar（50）非空，Mname nvarchar（50）非空，Lname nvarchar（50）非空，图像 nvarchar（max）非空）

创建过程 p1 @Fname nvarchar(50)、@Mname nvarchar(50)、@Lname nvarchar(50)、@images nvarchar(max)

开始插入 empdata 值(@Fname,@Mname,@Lname,@images)

结尾

我希望当用户单击保存按钮时，所有详细信息和图像都保存到数据库中。提前致谢！

标签： jqueryhtmlajaxmodel-view-controller