I am showing this functionality by creating an ASP.Net MVC 4 application (R- An Image Gallery Application In MVC 4).

The following is my SQL Server Data Table structure: (Album_Details).

design view
Image 1.

Now open Visual Studio and select "File" -> "New" -> "Project...":

New Project
Image 2.

internet application
Image 3.

Now right-click on the Model Folder Add New Item -> Add New Class (ImageInfo):

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  6. namespace AnImageGalleryApplicationInMVC4.Models
  7. {
  8. public class ImageInfo
  9. {
  10. public int Image_Id { get; set; }
  11. public string Image_Name { get; set; }
  12. public byte[] Image { get; set; }
  13. public string Image_UploadedDate { get; set; }
  14. }
  15. }
Now again right-click on the Model Folder-> Add New Item -> Add New Class (RAlbumService):
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Data;
  6. using System.Data.SqlClient;
  7. using System.Configuration;
  8. using System.IO;
  10. namespace AnImageGalleryApplicationInMVC4.Models
  11. {
  12. public class RAlbumService
  13. {
  14. public IList<ImageInfo> GetAllImages()
  15. {
  16. List<ImageInfo> objImgInfo = new List<ImageInfo>();
  17. SqlDataAdapter da;
  18. DataSet ds = new DataSet();
  19. SqlConnection con = new SqlConnection();
  20. con.ConnectionString = @"Data Source=MYPC\SqlServer2k8;Integrated Security=true;Initial Catalog=R-ImageGallery";
  21. SqlCommand cmd = new SqlCommand("SELECT * FROM Album_Details", con);
  22. da = new SqlDataAdapter(cmd);
  23. da.Fill(ds);
  24. con.Open();
  25. cmd.ExecuteNonQuery();
  26. con.Close();
  27. if (!object.Equals(ds.Tables[0], null))
  28. {
  29. if (ds.Tables[0].Rows.Count > 0)
  30. {
  32. for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
  33. {
  34. ImageInfo objThisIMGInfo = new ImageInfo();
  35. objThisIMGInfo.Image_Id = Convert.ToInt32(ds.Tables[0].Rows[i]["IMG_ID"]);
  36. objThisIMGInfo.Image_Name = ds.Tables[0].Rows[i]["ImageName"].ToString();
  37. objThisIMGInfo.Image = (byte[])ds.Tables[0].Rows[i]["Photo"];
  40. objThisIMGInfo.Image_UploadedDate = ds.Tables[0].Rows[i]["UploadedDate"].ToString().Split(' ')[0];
  42. objImgInfo.Add(objThisIMGInfo);
  43. }
  45. }
  46. }
  47. return objImgInfo.ToList();
  48. }
  50. public byte[] GetImageDetails(int id)
  51. {
  52. SqlConnection con = new SqlConnection(@"Data Source=MYPC\SqlServer2k8;Integrated Security=true;Initial Catalog=R-ImageGallery");
  53. using (SqlCommand cmd = new SqlCommand())
  54. {
  55. cmd.Connection = con;
  56. cmd.CommandType = CommandType.Text;
  57. cmd.CommandText = "SELECT Photo FROM Album_Details where IMG_ID=@ImageId";
  58. cmd.Parameters.AddWithValue("@ImageId", id);
  59. con.Open();
  60. SqlDataReader dr = cmd.ExecuteReader();
  61. ImageInfo objImageInfo = new ImageInfo();
  62. while (dr.Read())
  63. {
  64. objImageInfo.Image = (byte[])dr["Photo"];
  65. }
  66. return objImageInfo.Image;
  67. }
  68. }
  70. public int UploadImage(ImageInfo objImageInfo)
  71. {
  72. SqlConnection con = new SqlConnection(@"Data Source=MYPC\SqlServer2k8;Integrated Security=true;Initial Catalog=R-ImageGallery");
  73. using (SqlCommand cmd = new SqlCommand())
  74. {
  75. cmd.Connection = con;
  76. cmd.CommandType = CommandType.Text;
  77. cmd.CommandText = "INSERT INTO Album_Details(ImageName,Photo) VALUES(@ImageName,@Photo)";
  78. cmd.Parameters.AddWithValue("@ImageName", objImageInfo.Image_Name);
  79. cmd.Parameters.AddWithValue("@Photo", objImageInfo.Image);
  80. con.Open();
  81. int result = cmd.ExecuteNonQuery();
  82. con.Close();
  83. return result;
  84. }
  85. }
  86. }
  87. }
Now right-click on Controller -> Add New Controller (Albums):
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using AnImageGalleryApplicationInMVC4.Models;
  7. using System.IO;
  9. namespace AnImageGalleryApplicationInMVC4.Controllers
  10. {
  11. public class AlbumsController : Controller
  12. {
  13. RAlbumService objAlbumModelService = new RAlbumService();
  15. [HttpGet]
  16. public ActionResult Index()
  17. {
  18. ViewBag.total = objAlbumModelService.GetAllImages().ToList().Count;
  19. return View(objAlbumModelService.GetAllImages().ToList());
  20. }
  22. public ActionResult GetImgInformation(int id)
  23. {
  24. byte[] cover = objAlbumModelService.GetImageDetails(id);
  25. if (cover != null)
  26. {
  27. return File(cover, "image/jpg");
  28. }
  29. else
  30. {
  31. return null;
  32. }
  33. }
  36. [HttpPost]
  37. public ActionResult Index(FormCollection collection)
  38. {
  39. HttpPostedFileBase file = Request.Files["ImageData"];
  40. ImageInfo objAlbumMaster = new ImageInfo();
  41. objAlbumMaster.Image_Name = collection["ImageName"].ToString();
  42. objAlbumMaster.Image = ConvertToBytes(file);
  43. objAlbumModelService.UploadImage(objAlbumMaster);
  44. return View(objAlbumModelService.GetAllImages().ToList());
  45. }
  47. public byte[] ConvertToBytes(HttpPostedFileBase image)
  48. {
  49. byte[] imageBytes = null;
  50. BinaryReader reader = new BinaryReader(image.InputStream);
  51. imageBytes = reader.ReadBytes((int)image.ContentLength);
  52. return imageBytes;
  53. }
  54. }
  55. }
Now right-click on the Index Method name add new view and do the following code:
  1. @model IList<AnImageGalleryApplicationInMVC4.Models.ImageInfo>
  2. @{
  3. ViewBag.Title = "An Image Gallery Application In MVC 4";
  4. }
  5. <table>
  6. <tr>
  7. <td style="vertical-align: top; width: 15%;">
  8. <table style="border: solid 2px Red; padding: 5px; width: 100%;">
  9. <tr>
  10. <td style="background-color: skyblue; color: red; text-align: center; font-weight: bold;">Upload Image
  11. </td>
  12. </tr>
  13. <tr>
  14. <td>
  15. @using (Html.BeginForm("Index", "Albums", FormMethod.Post, new { enctype = "multipart/form-data" }))
  16. {
  17. @Html.AntiForgeryToken()
  18. <table style="width: 100%;">
  19. <tr>
  20. <td style="padding-left: 10px;">Name :
  21. </td>
  22. <td>@Html.TextBox("ImageName", "", new { style = "width:200px" })
  23. </td>
  24. </tr>
  25. <tr>
  26. <td style="padding-left: 10px;">Image :
  27. </td>
  28. <td>
  29. <input type="file" name="ImageData" id="ImageData" />
  30. </td>
  31. </tr>
  32. <tr>
  33. <td></td>
  34. <td>
  35. <input type="submit" name="submit" value="Upload" />
  36. </td>
  37. </tr>
  38. </table>
  40. }
  42. </td>
  43. </tr>
  44. </table>
  45. </td>
  46. <td style="vertical-align:top;">
  47. <table style="border: solid 2px Green; padding: 5px; width: 100%;">
  48. <tr>
  49. <td colspan="4" style="background-color: skyblue; color: red; text-align: center; font-weight: bold;">All Uploaded Images
  50. </td>
  51. </tr>
  52. <tr>
  53. <td>
  54. <table>
  55. @{
  56. const int ShowColumn = 3;
  57. int OldRecords = 0;
  58. var items = Model.Skip(OldRecords).Take(ShowColumn);
  60. while (items.Count() > 0)
  61. {
  62. <tr>
  63. @foreach (var item in items)
  64. {
  65. <td style="padding-left: 5px;">
  66. <table>
  67. <tr>
  68. <td style="text-align: center;">
  69. <img src="/Albums/GetImgInformation/@item.Image_Id" width="140" />
  70. </td>
  71. </tr>
  72. <tr>
  73. <td style="text-align: center; font-weight: bold; color: Teal">@item.Image_Name | @item.Image_UploadedDate
  74. </td>
  75. </tr>
  77. </table>
  78. </td>
  79. }
  80. </tr>
  81. OldRecords += ShowColumn;
  82. items = Model.Skip(OldRecords).Take(ShowColumn);
  83. }
  84. }
  85. </table>
  86. </td>
  87. </tr>
  88. </table>
  90. </td>
  91. </tr>
  92. </table>
Now run your application:

Run your application
Image 4.

image
Image 5.

show image
Image 6.