سرفصلهای پست
- 1 ذخیره و بازیابی عکس در دیتابیس SQL Server با #C
- 2 مراحل ذخیره و بازیابی عکس در DataBase در MVC
- 2.1 گام اول : ساخت یک پروژه از نوع MVC
- 2.2 گام دوم : ساخت دیتابیس به روش EF Code First
- 2.3 گام سوم : ایجاد Controller برای دریافت و ذخیره عکس
- 2.4 گام سوم : ایجاد View برای ارسال عکس به Controller
- 2.5 گام چهارم : اجرای View و ذخیره عکس در دیتابیس
- 2.6 گام پنجم : بازیابی عکس از دیتابیس و ارسال آن به View
- 2.7 گام ششم : ایجاد یک Controller برای دریافت عکس ها از دیتابیس
- 2.8 گام هفتم : ایجاد یک view برای نمایش عکس ها دریافت شده از دیتابیس
- 2.9 گام هشتم : اجرای و نمایش عکس های ذخیره شده در دیتابیس
ذخیره و بازیابی عکس در دیتابیس 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 را اجرا نمایید و فایل خود انتخاب کرده و سپس بر دکمه ذخیره عکس کلیک نمایید به همین راحتی شما موفق شدید که عکس خود را درون دیتابیس ذخیره نمایید. عکسی که آپلود کرده اید به صورت تصویر زیر درون دیتابیس ذخیره می شود .

گام پنجم : بازیابی عکس از دیتابیس و ارسال آن به 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 را مطالعه نمایید .
27 پاسخ
با سلام
وقتتون بخیر
تو قسمت کدی که درون کنترلر قرار میدیم(گام سوم) از HttpPostedFileBase ارور میگیره و نمیشناسه.
سلام وقتتون بخیر
چه خطایی به شما نمایش داده میشود؟
تا بهتر بتونم راهنمایی بکنم.
پروژه من از نوع Web هست و اینکه اروری نشون نمیده تنها HttpPostedFileBase رو نمیشناسه.
“عکس پیوست شده است”
پیوست نشده
سلام
ممنون بابت راهنماییتون
من یه سوال دارم
من پروژه شما رو پیاده کردم و یه چیزایی بهش اضافه کردم
اول اینکه قبل از ادد تو دیتا بیس پسوند فایل انتخابی رو چک کنه اگه عکس(با هر فرمتی) نبود پیام مناسب نشون بده
دوم ماهیت اصلی فایل(contentType) رو چک کنه برا مواقعی که پسوند عکس هست اما بدنه فایل چیز دیگه هست پیام مناسب نشون بده
سوالم اینجاست چیکار کنم که تو ویوی ایندکس(ویوی بارگذاری عکس) بلافاصله بعد از انتخاب عکس اون عکس رو تو همون ویو نمایش بده به عنوان پیش نمایش قبل از ادد کردن تو دیتابیس.
سلام وقتتون بخیر
برای پیش نمایش تصویر می تونید از پلاگین های Jquery استفاده کنید و همین طور برای چک کردن فرمت عکس و حجم عکس قبل از آپلود تصویر
با پلاگین های جی کوئری آشنایی ندارم فقط در حد همین موضوع میخوام. اگه یه پست با همین موضوع بذارید ممنون میشم
سلام
در core باید چگونه عمل کد????
سلام برای آپلود تصویر در دیتابیس در ASP.NET Core
باید نوع پراپرتی مربوط به تصویر را در کلاس Entity به صورت زیر قرار بدید
بعدش با کد زیر می تونید آپلود رو انجام بدید
book متغیری هست که از نوع کلاس Entity من
که بعدش برای ذخیره اطلاعات از کد زیر استفاده میکنم
_Context.Books.AddAsync(book);
سلام من یک پروژه دارم که عکس و فایل زیاد داره. به نظر شما بهترین راه اینه که فیلها رو تو سرور قرار بدم بعدش آدرسو تو دیتابیس یا اینکه از filestream جهت ذخیره و بازیابی استفاده کنم؟
سلام وقتتون بخیر
پیشنهاد من این است که برای ذخیره عکس ها و فایل ها از یک سرور دانلود استفاده کنید.
با عرض سلام چطور می تونم از طریق سی شارپ آدرس یک عکس رو در دیتابیس sql server ذخیره و سپس بازیابی نماییم ممنون میشم از طریق یک برنامه راهنمایی فرمایید .
سلام وقتتون بخیر
شما برای ارتباط با دیتابیس می تونید از EntityFramework استفاده کنید. با EntityFramework می تونید کار ذخیره سازی و بازیابی آدرس عکس از دیتابیس را انجام دهید.
سلام.ممنون از آموزش خوبتون
من به مشکل برخوردم.تو کلاس 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
ارور میده دلیلش رو نمیدونم.
لطفا راهنمایی بفرمایید.
متشکرم
سلام ممنون … پروژتون ASP.NET MVC هست یا ASP.NET CORE ؟
ASP.Net MVC
سلام … گفتیدخط ارور میده ;using System.Data.Entity
شاید به این خاطر هست که EntityFramework رو نصب نکردید.
روی پروژتون راست کلیک کنید وگزینه ی Manage NuGet Package رو انتخاب کنید EntityFramework رو سرچ کنید و اگر نصب نشده بود این پکیج رو نصب کنید.
بله درست شد.متشکرم از راهنمایی شما
ولی وقتی اجرا میکنم در فایل 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.
سلام خواهش میکنم … مشکل شما در ارتباط با دیتابیس است . Connection String رو چک کنید و بررسی کنید آیا ارتباط به دیتابیس به درستی برقرار شده.
سلام
فرض کنید میخواهیم عکس را بهمراه اطلاعات دیگری ثبت کنیم در کنترلر از دستور ModelState.IsValid استفاده میکنیم
حال بخواهیم عکس دوباره در view نمایش داده شود باید چه کدی بنویسیم
با سلام خدمت شما … در همین پست من نحوه نمایش عکس در View را کامل توضیح دادم … موفق باشید.
بسیار سپاس گذارم . آموزش فوق العاده ای بود .خیلی به کارم اومد و گره از مشکلم باز کرد. امید وارم زندگیت بدون مشکل و گره پیش بره .
با سلام … ممنون … بسیار خوش حالم که با این آموزش مشکل شما حل شد
موفق باشید.
سلام ممنون از آموزش خوبتون
یه سوال
عکسها در دیتابیس ذخیره میشن ولی داخل یه فولدری هم باید ذخیره بشن درسته؟ پروژه ی شما کجاذخیره اش میکنه منظورم اینه تو چه فولدری؟
چون بعد واسه نشون دادن عکس از فولدرimage میخواد بیاره.
سلام … خواهش میکنم .
ما هم می تونیم عکس ها رو درون دیتابیس ذخیره کنیم و هم می تونیم درون یک فولدر روی سرور عکس ها رو آپلود کنیم .
در این مقاله ما نحوه آپلود عکس در دیتابیس رو آموزش دادیم وقتی ما عکس ها رو درون دیتابیس ذخیره می کنیم دیگه نیازی نداریم که توی فولدر هم اونو ذخیره کنیم در این پروژه هم ما تصویر را به آرایه ای از بایت ها تیدیل می کنیم و سپس درون یک فیلد از دیتابیس که برای ذخیره عکس در نظر گرفته شده است ذخیره می کنیم. فراخوانی عکس هم از دیتابیس انجام میشه دو تابعی که به این منظور استفاده کردیم عکس را از دیتابیس گرفته و در نما برای ما نمایش می دهند.
سلام. خدا قوت
بابت آموزش و توضیحاتتون، بسیار سپاس
واقعا مفید بود
سلام … خیلی ممنون
خوش حالم که براتون مفید بوده … موفق باشید.