//
you're reading...
C Sharp .NET, Codes

Cách Tải Ảnh Vào Và Hiện Thị Ảnh Ra Từ CSDL Trong MVC

Nếu bạn đang có một bảng hình ảnh trong CSDL Microsoft SQL Server, và bạn cần phải tải ảnh vào CSDL cũng như cần phải hiện thị chúng ra các View trong mô hình MVC của ASP.NET thì bạn có thể tham khảo các đoạn mã sau đây để đáp ứng được 2 yêu cầu trên. Nội dung và ý tưởng của bài viết được sử dụng từ bài viết sau: ASP.Net MVC: Upload Image to Database and Show Image “Dynamically” Using a View.

Giả sử bạn đang có bảng hình ảnh có cấu trúc như sau: ID (int) , NoiDung (image), MoTa(nvarchar(50))

Để tải hình vào CSDL của mình, bạn cần tạo 1 action trong 1 controller như sau:

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

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult TaiHinh(HinhAnhUploadModel hinhanh)
{
    HinhAnh hinhanhmoi = new HinhAnh();
    // File sẽ được lấy từ file FileHinhAnh của form
    HttpPostedFileBase file = Request.Files["FileHinhAnh"];
    hinhanhmoi.MoTa = hinhanh.MoTa;
    
    // Chuyển nội dung file thành mảng byte để lưu trữ
    Int32 length = file.ContentLength;
    byte[] tempImage = new byte[length];
    file.InputStream.Read(tempImage, 0, length);
    hinhanhmoi.NoiDung = tempImage;

    // Thêm hình ảnh vào CSDL
    storeDB.AddToHinhAnhs(hinhanhmoi);
    storeDB.SaveChanges();

    return View();
}

Trong đó, HinhAnhUploadModel là lớp chỉ có một thuộc tính duy nhất là MoTa (mô tả). Tiếp theo ta cần tạo View cho action TaiHinh này với nội dung như sau:

<% using (Html.BeginForm("Upload", "HinhAnh", FormMethod.Post, new { enctype = "multipart/form-data" })) {%>
<%: Html.ValidationSummary(true)%>
<fieldset>
<legend>Fields</legend>
<div class="editor-label">
                <%: Html.LabelFor(model => model.MoTa)%></div>
<div class="editor-field">
                <%: Html.TextBoxFor(model => model.MoTa)%>
                <%: Html.ValidationMessageFor(model => model.MoTa)%></div>
<div class="editor-label">
                Hinh Anh</div>
<div class="editor-field">
                <input id="FileHinhAnh" name="FileHinhAnh" type="file" /></div>
                <input type="submit" value="Upload" /></fieldset>
<% } %>

Chú ý rằng trong View trên, bạn cần phải có enctype=”multipart/form-data” cho thuộc tính của form thì mới có thể chuyển file từ form nhập vào được.

Để hiện thị hình từ CSDL của mình ra các View, bạn cần tạo 1 lớp được thừa kế từ lớp ActionResult như sau:

public class HinhAnhResult : ActionResult
{
        public byte[] NoiDungHinhAnh { get; set; }

        public HinhAnhResult(byte[] noidung)
        {
            NoiDungHinhAnh = noidung;
        }

        public override void ExecuteResult(ControllerContext context)
        {
            var response = context.HttpContext.Response;
            response.Clear();
            response.Cache.SetCacheability(HttpCacheability.NoCache);            
                        
            if (NoiDungHinhAnh != null)
            {
                var stream = new MemoryStream(NoiDungHinhAnh);
                stream.WriteTo(response.OutputStream);
                stream.Dispose();            
            }
        }
}

Và một action để xuất hình ra View:

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult XemHinh(Int32 id)
{
    HinhAnh hinhanh = storeDB.HinhAnhs.Where(h => h.ID == id).SingleOrDefault();

    HinhAnhResult result = new HinhAnhResult(hinhanh.NoiDung);

    return result;
}

Với 2 đoạn mã trên, ta đã có thể truy xuất động được nội dung của hình cần xem trong CSDL:

<img src="/HinhAnh/XemHinh/5" alt="" title="" border="0" />


~Fri3ng3R~

Advertisements

Discussion

7 thoughts on “Cách Tải Ảnh Vào Và Hiện Thị Ảnh Ra Từ CSDL Trong MVC

  1. Cho mình hỏi sao khi hiển thị lên view thì bị lỗi . Có thể cho xin mã nguồn được không .
    Lỗi .
    public HinhAnhResult(byte[] noidung)
    {
    this.NoiDungHinhAnh = noidung;
    }

    HinhAnhResult result = new HinhAnhResult(hinhanh.NoiDung);

    return result;

    Posted by chuong | 23.12.2010, 00:19
  2. Khong chạy dc bạn oi thư làm lai nhiều lần rồi hjx

    Posted by Nhật Quang | 06.04.2013, 10:26
  3. Your own post provides verified useful to us. It’s quite informative and
    you are clearly really educated in this area. You have got exposed my eyes to different opinion of this
    kind of topic using interesting and strong content.

    Posted by Bell | 30.04.2013, 22:51
  4. Cannoli can even be purchased at an Italian bakery. These as well as a plethora of other gift-giving occasions are the perfect
    opportunities to take advantage of both the beauty and versatility of diamond stud earrings.
    This happens due to lack of fund to hold a marriage event.

    Posted by sprifi.com | 14.07.2013, 14:17
  5. Highly energetic post, I enjoyed that bit.
    Will there be a part 2?

    Posted by gojiactives funciona | 26.07.2013, 17:44

Trackbacks/Pingbacks

  1. Pingback: Up.VietGeeks.com - 08.11.2010

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: