将图像上载到ASP.NET MVC网站并将其保存在数据库中

时间:2016-12-11 14:09:31

标签: c# asp.net asp.net-mvc image

我有一个页面,客户想要上传厨房的图像,并为每个添加一些文本+标题。现在我的解决方案支持通过URL上传图像,但我希望客户能够通过“浏览”按钮将他自己的图像从他的计算机上传到网站上。

这是我目前的模特课程:

public class Udstillingsmodel
{
    public int ID { get; set; }
    public string titel { get; set; }
    public string beskrivelse { get; set; }
    public string billedeSti { get; set; }
}

public class UdstillingsmodelDBContext : DbContext
{
    public UdstillingsmodelDBContext() : base("UdstillingsmodelDBContext") { }
    public DbSet<Udstillingsmodel> Udstillingsmodels { get; set; }
}

这是我当前在模型控制器的“创建”视图中放置按钮的地方:

<div class="form-group">
        <div class="control-label col-md-2">
            <p><b>Billede:</b></p>
        </div>
        <div class="col-md-10">
            <input type="file" accept="image/png, image/jpeg, image/gif" name="image" />
            @Html.EditorFor(model => model.billedeSti, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.billedeSti, "", new { @class = "text-danger" })
        </div>
    </div>

这些是Create函数的两个GET和POST方法:

// GET: Udstillingsmodels/Create
public ActionResult Create()
    {
        return View();
    }

    // POST: Udstillingsmodels/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "ID,titel,beskrivelse,billedeSti")] Udstillingsmodel udstillingsmodel)
    {
        if (ModelState.IsValid)
        {
            db.Udstillingsmodels.Add(udstillingsmodel);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(udstillingsmodel);
    }

我通过名为“image”的“浏览”按钮选择图像作为变量,但我不确定如何处理这个以及如何通过Entity框架正确保存图像。现在我的模型的“图像”属性只是一个字符串,但我认为它可以指向内容文件夹中的一个位置,其中存储了我的所有其他图像,就像我在网站上的其他地方所做的那样。如果您需要更多信息和代码,请与我们联系。

这是“创建”视图当前显示的方式,添加了按钮。 http://i.imgur.com/PgYq9nL.png

1 个答案:

答案 0 :(得分:2)

首先,您的开始表单应该是这样的

@using (Html.BeginForm("youraction", "Your controller", null, FormMethod.Post, new { enctype = "multipart/form-data" }))

然后你的控制器创建动作

//"image" is the name of the html fileupload element
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Udstillingsmodel udstillingsmodel,HttpPostedFileBase image)
    {
    if (ModelState.IsValid)
    {
 //upload image
            if (image!= null && image.ContentLength > 0)
            {
                try
                {
//Here, I create a custom name for uploaded image
                    string file_name = udstillingsmodel.titel + Path.GetExtension(image.FileName);

                    string path = Path.Combine(Server.MapPath("~/Content/images"), file_name);
                    image.SaveAs(path);

 // image_path is nvarchar type db column. We save the name of the file in that column. 
                    udstillingsmodel.image_path= file_name;
                }
                catch (Exception ex)
                {

                }
            }


        db.Udstillingsmodels.Add(udstillingsmodel);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(udstillingsmodel);
}

希望有所帮助