ذخیره عکس در دیتابیس و نمایش آن در View در ASP.NET MVC

ذخيره عکس در ديتابيس و نمايش آن در MVC
ذخيره عکس در ديتابيس و نمايش آن در MVC

ذخیره و بازیابی عکس در دیتابیس SQL Server با #C

با سلام خدمت تمامی همراهان مقالات آموزشی طراحی سایت با ASP.NET  ، در این مقاله آموزشی قصد داریم تا نحوه ذخیره عکس در دیتابیس و دریافت عکس از دیتابیس و نمایش آن در View را به شما عزیزان آموزش دهیم .

هرچند ذخیره تصویر در دیتابیس و یا بانک اطلاعاتی باعث سنگینی دیتابیس می‌شود اما در بعضی مواقع نیاز داریم که فایل ها و عکس‌هایی که برایمان از اهمیت خاصی برخوردار هستند را درون دیتابیس ذخیره کنیم . در این مقاله آموزشی به شما نحوه ذخیره یا آپلود عکس در دیتابیس را آموزش خواهم داد پس با این مقاله آموزشی همراه باشید و مراحل زیر به ترتیب انجام دهید.

مراحل ذخیره و بازیابی عکس در DataBase در MVC

گام اول : ساخت یک پروژه از نوع MVC

برای شروع کار ابتدا یک پروژه خالی از نوع MVC ایجاد نمایید. برای این منظور ابتدا در ویژوال 2015 یک پروژه‌ی جدید از نوع ASP.NET Web Application ایجاد کرده و سپس نام دلخواهی برای پژوه‌ی خود قرار دهید سپس در قسمت ASP.NET 4.5.2 Templates گزینه Empty را انتخاب نموده و در قسمت Add folders and core references for تیک MVC را بزنید و سپس بر روی دکمه OK کلیک نمایید تا یک پروژه خالی از نوع MVC برای شما ایجاد شود.

گام دوم : ساخت دیتابیس به روش EF Code First

حال با روش EF Code First یک دیتابیس برای ذخیره عکس در SQL SERVER ایجاد می نماییم برای این منظور درون پوشه‌ی Model یک class به نام ImageDB یا نام دلخواه خود ایجاد نمایید. سپس کدهای زیر را درون این class کپی کنید. توجه داشته باشید که حتما نوع فیلد image را برابر []byte قرار دهید چون می‌خواهیم عکس را به آرایه ای از بایت ها تبدیل کرده و سپس درون دیتابیس ذخیره کنیم توجه داشته باشید که اگر می‌خواهید خودتان به صورت دستی دیتابیس خود را در SQL SERVER  ایجاد کرده و جدولی برای ذخیره عکس در آن بسازید حتما نوع فیلد Image را در SQL SERVER برابر Image قرار دهید.

کدهای درون class

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;

namespace ImageInDB.Models
{
    public class ImageDB
    {
        public int id { get; set; }

        [Display(Name = "تصوير", Prompt = "تصوير", Description = "تصوير")]
        [Column(TypeName = "image")]
        public byte[] Image { get; set; }
    }
}

حال برای ساخت دیتابیس به روش EF Code First باید یک برای Context پروژه خود ایجاد نمایید برای این منظور بر روی پوشه Model کلیک راست کرده و گزینه Add و سپس گزینه Class را انتخاب نمایید حال یک نام برای کلاس context انتخاب کنید ما نام “ImageInDBContext” را برای کلاس Context انتخاب می کنم . کدهای زیر درون کلاس Context کپی نمایید.

کدهای درون کلاس context

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace ImageInDB.Models
{
    public class ImageInDBContext : DbContext
    {
        public ImageInDBContext() : base("name=ImageInDBContext")
        {
        }
        public System.Data.Entity.DbSet<ImageInDB.Models.ImageDB> ImageDB { get; set; }
    }
}

و سپس connectionStrings زیر را برای ارتباط پروژه با دیتابیس به Web.Config اضافه نمایید.

  <connectionStrings>
    <add name="ImageInDBContext" connectionString="Data Source=(local); Initial Catalog=ImageDB; Integrated Security=True; MultipleActiveResultSets=True;"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

گام سوم : ایجاد Controller برای دریافت و ذخیره عکس

خب حالا نوبت به ایجاد کنترلر می‌رسد برای ساخت کنترلر ابتدا روی پوشه Controller راست کلیک کرده و گزینه Add انتخاب کنید سپس بر روی گزینه Controller کلیک کرده و با انتخاب گزینه MVC 5 Controller – Empty یک کنترل جدید از نوع Empty بسازید ما نام controller خود را SaveToDB قرار می‌دهیم سپس درون این کنترلر یک Action Method به نام Index قرار دهید این اکشن متد تصویر را که از نوع HttpPostedFileBase است، به عنوان پارامتر ورودی دریافت و سپس آن را به آرایه ای از بایت‌ها تبدیل کرده و درنهایت در data base ذخیره می‌نماید. برای دریافت عکس و ذخیره آن در دیتابیس کدهای زیر را درون کنترلر  کپی نمایید.

کدهای درون Cotroller

using ImageInDB.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ImageInDB.Controllers
{
    public class SaveToDBController : Controller
    {
        // GET: SaveToDB
        private ImageInDBContext db = new ImageInDBContext();
        public ActionResult Index(HttpPostedFileBase Image)
        {
            if (Image != null)
            {
                byte[] uploadFile = new byte[Image.InputStream.Length];
                Image.InputStream.Read(uploadFile, 0, uploadFile.Length);

                ImageDB ImageDB = new ImageDB()
                {
                    Image = uploadFile,
                };
                db.ImageDB.Add(ImageDB);
                db.SaveChanges();
            }
            return View();
        }
    }
}

گام سوم : ایجاد View برای ارسال عکس به Controller  

حال باید یک View برای اکشن متد Index  بسازید برای این کار درون متد Index راست کلیک کرده و گزینه Add view را انتخاب کنید پس از ساخت ویو درون آن یک تگ Input از نوع file و یک تگ input از نوع submit برای ارسال فرم به Controller قرار می‌دهیم.

@{
    ViewBag.Title = "Index";
}
<div style="direction:rtl;">
    <h3>ذخیره عکس در دیتابیس</h3>

    @using (Html.BeginForm("Index", "SaveToDB", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()

        <div class="col-md-12">
            <div class="col-md-2">
                <input type="file" name="Image" />
            </div>
            <div class="col-md-3">
                <input type="submit" value="ذخیره عکس" />
            </div>
        </div>
    }
</div>

گام چهارم : اجرای View و ذخیره عکس در دیتابیس

حالا صفحه View را اجرا نمایید و فایل خود انتخاب کرده و سپس بر دکمه ذخیره عکس کلیک نمایید به همین راحتی شما موفق شدید که عکس خود را درون دیتابیس ذخیره نمایید. عکسی که آپلود کرده اید به صورت تصویر زیر درون دیتابیس ذخیره می شود .

آپلود عکس در دیتابیس در mvc
آپلود عکس در دیتابیس در mvc

گام پنجم : بازیابی عکس از دیتابیس و ارسال آن به View

حال برای گرفتن عکس از دیتابیس و نمایش آن در View ، دو متد GetImageFromDataBase و RetrieveImage را به کنترلر SaveToDB اضافه نمایید، متد GetImageFromDataBase یک متغیر به نام id که همان id عکس در دیتابیس است را به عنوان ورودی می‌گیرد و با دستور LINQ تصویر را از دیتابیس خوانده و در متغیر cover قرار می‌دهد و متد RetrieveImage متد GetImageFromDataBase را فراخوانی کرده و عکس را در قالب Image ارسال میکند.

کدهای متد GetImageFromDataBase و RetrieveImage

 using ImageInDB.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ImageInDB.Controllers
{
    public class SaveToDBController : Controller
    {
        // GET: SaveToDB
        private ImageInDBContext db = new ImageInDBContext();
        public ActionResult Index(HttpPostedFileBase Image)
        {
            if (Image != null)
            {
                byte[] uploadFile = new byte[Image.InputStream.Length];
                Image.InputStream.Read(uploadFile, 0, uploadFile.Length);

                ImageDB ImageDB = new ImageDB()
                {
                    Image = uploadFile,
                };
                db.ImageDB.Add(ImageDB);
                db.SaveChanges();
            }
            return View();
        }


        public ActionResult RetrieveImage(int id)
        {
            try
            {
                byte[] cover = GetImageFromDataBase(id);
                if (cover != null)
                {
                    return File(cover, "image/jpg");
                }
                else
                {
                    return null;
                }
            }
            catch
            {
                return View("Error");
            }
        }

        public byte[] GetImageFromDataBase(int Id)// ای دی عکس را میگیرد
        {
            byte[] cover = (from temp in db.ImageDB where temp.id == Id select temp.Image).First();
            return cover;
        }
    }
}

گام ششم : ایجاد یک Controller برای دریافت عکس ها از دیتابیس

حال درون کنترلر SaveToDB یک action method برای گرفتن عکس ها از دیتابیس و ارسال آن ها به View ایجاد نمایید ما نام متد خود را ShowImages می‌گذاریم سپس کدهای زیر درون این متد کپی کنید.

  public ActionResult ShowImages()
        {
            var GetImages = (from d in db.ImageDB select d).ToList();
            return View(GetImages);
        }

گام هفتم : ایجاد یک view برای نمایش عکس ها دریافت شده از دیتابیس

حال برای اکشن متد ShowImages یک ویو ساخته و کدهای زیر درون آن کپی نمایید . در قسمت تگ image متد RetrieveImag فراخوانی شده و id عکس به عنوان پارامتر ورودی به آن ارسال شده است.

@model IEnumerable<ImageInDB.Models.ImageDB>
@{
    ViewBag.Title = "ShowImages";
}


@foreach (var item in Model)
{
    <img src="@Url.Action("RetrieveImage", "SaveToDB", new { id = item.id})"/>
}

گام هشتم : اجرای و نمایش عکس های ذخیره شده در دیتابیس

حال ویو را اجرا کرده و تصاویر ذخیره شده در دیتابیس را مشاهده نمایید. به همین راحتی شما موفق شدید که عکس های ذخیره شده در دیتابیس را خوانده و در View نمایش دهید.

بسیار خب به پایان این مقاله آموزش ذخیره و بازیابی عکس با سی شارپ در ASP.NET MVC رسیدیم امیدوارم که مطالب این جلسه آموزشی برای شما عزیزان مفید واقع بشود اگر سوالی در ارتباط با مقالات ASP.NET MVC داشتید حتما در قسمت نظرات مطرح کنید . شما عزیزان از طریق منوی سمت چپ می‌توانید سایر مقالات آمورشی ASP.NET MVC را مطالعه نمایید .

فیلم آموزشی asp.net core 2

آرزو ابراهیمی
بیش از 6 سال است که زمینه طراحی و توسعه سایت فعالیت می‌کنم، طراح و برنامه نویس انواع سامانه‌های تخصصی پزشکی، مناقصات، فروشگاهی و … بودم و هستم و هدفم در سایت میزفا ارائه اطلاعات بروز و ناب در زمینه طراحی سایت است. تا از این طریق بتونم تجربیات و دانسته های خودم را با تمامی علاقمندان به مباحث طراحی سایت به اشتراک بزارم .

فیلم آموزشی asp.net core 2

27 نظر

27 پاسخ

  1. با سلام
    وقتتون بخیر
    تو قسمت کدی که درون کنترلر قرار میدیم(گام سوم) از HttpPostedFileBase ارور میگیره و نمیشناسه.

    1. سلام وقتتون بخیر
      چه خطایی به شما نمایش داده میشود؟
      تا بهتر بتونم راهنمایی بکنم.

      1. پروژه من از نوع Web هست و اینکه اروری نشون نمیده تنها HttpPostedFileBase رو نمیشناسه.
        “عکس پیوست شده است”

  2. سلام
    ممنون بابت راهنماییتون
    من یه سوال دارم
    من پروژه شما رو پیاده کردم و یه چیزایی بهش اضافه کردم
    اول اینکه قبل از ادد تو دیتا بیس پسوند فایل انتخابی رو چک کنه اگه عکس(با هر فرمتی) نبود پیام مناسب نشون بده
    دوم ماهیت اصلی فایل(contentType) رو چک کنه برا مواقعی که پسوند عکس هست اما بدنه فایل چیز دیگه هست پیام مناسب نشون بده
    سوالم اینجاست چیکار کنم که تو ویوی ایندکس(ویوی بارگذاری عکس) بلافاصله بعد از انتخاب عکس اون عکس رو تو همون ویو نمایش بده به عنوان پیش نمایش قبل از ادد کردن تو دیتابیس.

    1. سلام وقتتون بخیر
      برای پیش نمایش تصویر می تونید از پلاگین های Jquery استفاده کنید و همین طور برای چک کردن فرمت عکس و حجم عکس قبل از آپلود تصویر

      1. با پلاگین های جی کوئری آشنایی ندارم فقط در حد همین موضوع میخوام. اگه یه پست با همین موضوع بذارید ممنون میشم

    1. سلام برای آپلود تصویر در دیتابیس در ASP.NET Core
      باید نوع پراپرتی مربوط به تصویر را در کلاس Entity به صورت زیر قرار بدید

       [Column(TypeName ="image")]
      public byte[] Image { get; set; }
      

      بعدش با کد زیر می تونید آپلود رو انجام بدید

      public async Task UploadAsync(IFormFile Image)
      {
               using (var memorySteam = new MemoryStream())
               {
                   await Image.CopyToAsync(memorySteam);
                   book.Image = memorySteam.ToArray();
               }
      }
      

      book متغیری هست که از نوع کلاس Entity من
      که بعدش برای ذخیره اطلاعات از کد زیر استفاده میکنم
      _Context.Books.AddAsync(book);

  3. سلام من یک پروژه دارم که عکس و فایل زیاد داره. به نظر شما بهترین راه اینه که فیلها رو تو سرور قرار بدم بعدش آدرسو تو دیتابیس یا اینکه از filestream جهت ذخیره و بازیابی استفاده کنم؟

    1. سلام وقتتون بخیر
      پیشنهاد من این است که برای ذخیره عکس ها و فایل ها از یک سرور دانلود استفاده کنید.

  4. با عرض سلام چطور می تونم از طریق سی شارپ آدرس یک عکس رو در دیتابیس sql server ذخیره و سپس بازیابی نماییم ممنون میشم از طریق یک برنامه راهنمایی فرمایید .

    1. سلام وقتتون بخیر
      شما برای ارتباط با دیتابیس می تونید از EntityFramework استفاده کنید. با EntityFramework می تونید کار ذخیره سازی و بازیابی آدرس عکس از دیتابیس را انجام دهید.

  5. سلام.ممنون از آموزش خوبتون
    من به مشکل برخوردم.تو کلاس ImageInDBContext به
    تو این خط ;using System.Data.Entity به Entity
    تو این خط public class ImageInDBContext : DbContext به DbContext
    تو این خط (“public ImageInDBContext() : base(“name=ImageInDBContext به (“base(“name=ImageInDBContext
    تو این خط {;public System.Data.Entity.DbSet ImageDB { get; set به Entity
    ارور میده دلیلش رو نمیدونم.
    لطفا راهنمایی بفرمایید.
    متشکرم

    1. سلام ممنون … پروژتون ASP.NET MVC هست یا ASP.NET CORE ؟

        1. سلام … گفتیدخط ارور میده ;using System.Data.Entity
          شاید به این خاطر هست که EntityFramework رو نصب نکردید.
          روی پروژتون راست کلیک کنید وگزینه ی Manage NuGet Package رو انتخاب کنید EntityFramework رو سرچ کنید و اگر نصب نشده بود این پکیج رو نصب کنید.

          1. بله درست شد.متشکرم از راهنمایی شما
            ولی وقتی اجرا میکنم در فایل controller این خط db.ImageDB.Add(ImageDB); Exception زیر رو میده.
            An exception of type ‘System.Data.SqlClient.SqlException’ occurred in EntityFramework.dll but was not handled in user code.

          2. سلام خواهش میکنم … مشکل شما در ارتباط با دیتابیس است . Connection String رو چک کنید و بررسی کنید آیا ارتباط به دیتابیس به درستی برقرار شده.

  6. سلام
    فرض کنید میخواهیم عکس را بهمراه اطلاعات دیگری ثبت کنیم در کنترلر از دستور ModelState.IsValid استفاده میکنیم
    حال بخواهیم عکس دوباره در view نمایش داده شود باید چه کدی بنویسیم

    1. با سلام خدمت شما … در همین پست من نحوه نمایش عکس در View را کامل توضیح دادم … موفق باشید.

  7. بسیار سپاس گذارم . آموزش فوق العاده ای بود .خیلی به کارم اومد و گره از مشکلم باز کرد. امید وارم زندگیت بدون مشکل و گره پیش بره .

    1. با سلام … ممنون … بسیار خوش حالم که با این آموزش مشکل شما حل شد
      موفق باشید.

  8. سلام ممنون از آموزش خوبتون
    یه سوال
    عکسها در دیتابیس ذخیره میشن ولی داخل یه فولدری هم باید ذخیره بشن درسته؟ پروژه ی شما کجاذخیره اش میکنه منظورم اینه تو چه فولدری؟
    چون بعد واسه نشون دادن عکس از فولدرimage میخواد بیاره.

    1. سلام … خواهش میکنم .
      ما هم می تونیم عکس ها رو درون دیتابیس ذخیره کنیم و هم می تونیم درون یک فولدر روی سرور عکس ها رو آپلود کنیم .
      در این مقاله ما نحوه آپلود عکس در دیتابیس رو آموزش دادیم وقتی ما عکس ها رو درون دیتابیس ذخیره می کنیم دیگه نیازی نداریم که توی فولدر هم اونو ذخیره کنیم در این پروژه هم ما تصویر را به آرایه ای از بایت ها تیدیل می کنیم و سپس درون یک فیلد از دیتابیس که برای ذخیره عکس در نظر گرفته شده است ذخیره می کنیم. فراخوانی عکس هم از دیتابیس انجام میشه دو تابعی که به این منظور استفاده کردیم عکس را از دیتابیس گرفته و در نما برای ما نمایش می دهند.

  9. سلام. خدا قوت
    بابت آموزش و توضیحاتتون، بسیار سپاس
    واقعا مفید بود

    1. سلام … خیلی ممنون
      خوش حالم که براتون مفید بوده … موفق باشید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=