ذخیره و بازیابی تصاویر از دیتابیس توسط Generic Handler در ASP.Net

در این مقاله آموزش می دهیم که چگونه تصاویر را با فرمت باینری ذخیره کنیم و با استفاده از HttpHandler آن را بازیابی کرده و در یک GridView نمایش دهیم.

ذخیره و بازیابی تصاویر از دیتابیس توسط Generic Handler در ASP.Net

در این مثال، اطلاعات کارمندی را به همراه پیش نمایش عکس کارمند ذخیره کرده و این اطلاعات را با PhotoID در GridView نمایش می دهیم.

حال این مثال را گام به گام جلو می بریم:

گام اول:

ابتدا جدول Employeeimage را در SQL Server Database ایجاد می کنیم.

    create Table EmployeeImage  
    (  
    ImageId int identity(1,1), --- make auto increment id  
    ImgName nvarchar(50),  
    Photo image,  
    Contact nvarchar(15),  
    Designation varchar(50)  
    )  

گام دوم:

ویژوال استودیو را باز کرده و به صورت زیر یک صفحه برای طراحی خود ایجاد می کنیم.

روی New Item کلیک کرده و یک web form جدید با نام مناسب ایجاد می کنیم.

حال کد مربوط به آپلود عکس و پیش نمایش آن را با تابع jQuery می نویسیم:

<script type="text/javascript">  
   function previewFile() {  
       var ImagePreview = document.querySelector('#<%=ImgUpload.ClientID %>');  
       var ImageFile = document.querySelector('#<%=FileUpload.ClientID %>').files[0];  
       var reader = new FileReader();  
  
       reader.onloadend = function () {  
           ImagePreview.src = reader.result;  
       }  
  
       if (ImageFile) {  
           reader.readAsDataURL(ImageFile);  
       } else {  
           ImagePreview.src = "";  
       }  
   }  
</script> 

سپس کد طراحی مربوط به صفحه وارد کردن اطلاعات کارمندی را به صورت زیر می نویسیم:

           <div>  
<fieldset style="width: 490px"><legend>PhotoID اطلاعات کارمندان با</legend>  
    <asp:Table runat="server" Width="442px" style="text-align: right" dir="rtl">  
         
        <asp:TableRow>  
            <asp:TableCell></asp:TableCell><asp:TableCell><asp:Image ID="ImgUpload" ToolTip="عکس پرسنلی را از اینجا آپلود نمایید." runat="server" Height="200px"  Width="200px" /></asp:TableCell>  
        </asp:TableRow>  
  
             <asp:TableRow>  
                <asp:TableCell> آپلود عکس:</asp:TableCell><asp:TableCell> <input ID="FileUpload" type="file" name="file" onchange="previewFile()"  runat="server" /></asp:TableCell>  
            </asp:TableRow>  
  
         <asp:TableRow>  
            <asp:TableCell>نام کارمند:</asp:TableCell><asp:TableCell><asp:TextBox ID="txtName" runat="server"></asp:TextBox> </asp:TableCell>  
        </asp:TableRow>  
  
        <asp:TableRow>  
            <asp:TableCell>شماره تماس:</asp:TableCell><asp:TableCell><asp:TextBox ID="txtContact" runat="server" ></asp:TextBox></asp:TableCell>  
        </asp:TableRow>  
  
        <asp:TableRow>  
            <asp:TableCell>سمت:</asp:TableCell><asp:TableCell><asp:TextBox ID="txtDesignation" runat="server" ></asp:TextBox></asp:TableCell>  
        </asp:TableRow>  
          
        <asp:TableRow>  
            <asp:TableCell></asp:TableCell><asp:TableCell><asp:Button ID="btnDataInsert" runat="server" Text="ثبت" onclick="btnDataInsert_Click" /></asp:TableCell>  
        </asp:TableRow>  
  
    </asp:Table>  
      
</fieldset>  
</div>

یک GridView برای نمایش اطلاعات کارمندی با PhotoID کارمند اضافه می کنیم.

        <div>  
    <asp:GridView ID="GridEmpImg" runat="server" AutoGenerateColumns="False">  
        <Columns>  
        <asp:TemplateField HeaderText="عکس">  
        <ItemTemplate>  
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# "DisplayImage.ashx?ImageId="+ Eval("ImageId") %>' Height="150px" Width="150px"/>  
        </ItemTemplate>  
        </asp:TemplateField>  
        <asp:BoundField HeaderText = "نام کارمند" DataField="imgname" />  
        <asp:BoundField HeaderText = "شماره تماس" DataField="Contact" />  
        <asp:BoundField HeaderText = "سمت" DataField="Designation" />  
        </Columns>  
    </asp:GridView>  
</div>

درنهایت، طراحی صفحه طبق کدهای نوشته شده به شکل زیر خواهد بود:

گام چهارم:

Connection String را به صورت زیر در web.config می نویسیم.

    <connectionStrings>  
        <add name="connstr" connectionString="Data Source=RAKESH-PC;Initial Catalog=SqlServerTech;User ID=sa;Password=jm" providerName="System.Data.SqlClient"/>  
        <add name="Pratical_testConnectionString" connectionString="Data Source=RAKESH-PC;Initial Catalog=Pratical_test;User ID=sa" providerName="System.Data.SqlClient"/>  
      </connectionStrings>  

گام پنجم:

Code Behind صفحه نیز به شکل زیر است:

در این قسمت، کد آپلود عکس را خواهیم نوشت، کد Insert و select اطلاعات کارمند و کد PhotoID با استفاده از  Generic HttpHandler به صورت زیر خواهد بود:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Configuration;  
using System.Data.SqlClient;  
using System.Data;  
using System.IO;  
  
  
namespace Test_WebApplication.ImageCode  
{  
    public partial class ImageDemo : System.Web.UI.Page  
    {  
        string constring = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            EmpImageInfo();  
        }  
  
       protected void Upload(object sender, EventArgs e)  
        {  
           string fileName = FileUpload.PostedFile.FileName;  
        }  
  
       protected void btnDataInsert_Click(object sender, EventArgs e)  
       {  
           int length = FileUpload.PostedFile.ContentLength;  
  
           byte[] imgbyte = new byte[length];  
  
           HttpPostedFile image = FileUpload.PostedFile;  
  
           image.InputStream.Read(imgbyte, 0, length);  
           string ImgName = txtName.Text;  
           string Contact = txtContact.Text;  
           string Designation = txtDesignation.Text;  
  
           SqlConnection conn = new SqlConnection(constring);  
           conn.Open();  
           SqlCommand cmd = new SqlCommand("INSERT INTO EmployeeImage (ImgName,photo,Contact,Designation) VALUES (@ImgName,@photo,@Contact,@Designation)", conn);  
           cmd.Parameters.Add("@ImgName", SqlDbType.VarChar, 50).Value = ImgName;  
           cmd.Parameters.Add("@photo", SqlDbType.Image).Value = imgbyte;  
           cmd.Parameters.Add("@Contact", SqlDbType.NVarChar, 15).Value = Contact;  
           cmd.Parameters.Add("@Designation", SqlDbType.VarChar, 50).Value = Designation;  
           int count = cmd.ExecuteNonQuery();  
           conn.Close();  
  
           if (count == 1)  
           {  
               EmpImageInfo();  
               ScriptManager.RegisterStartupScript(this, this.GetType(), "alertmessage", "javascript:alert('" + ImgName + " PhotoID Information Inserted successfully')", true);  
           }  
           txtName.Text = string.Empty;  
           txtContact.Text = string.Empty;  
           txtDesignation.Text = string.Empty;  
       }  
  
       private void EmpImageInfo()  
        {  
            SqlConnection conn = new SqlConnection(constring);  
            SqlCommand cmd = new SqlCommand("SELECT ImageId, ImgName,Photo,Contact,Designation from EmployeeImage", conn);  
            SqlDataAdapter da = new SqlDataAdapter(cmd);  
            DataTable dt = new DataTable();  
            da.Fill(dt);  
            GridEmpImg.DataSource = dt;  
            GridEmpImg.DataBind();  
       }  
         
    }  
} 

گام ششم:

یک فایل ashx.cs. به پروژه اضافه می کنیم.
حالا یک فایل مهم تر یعنی generic handler را برای نمایش عکس در GridView، به پروژه اضافه می کنیم.

حال کد generic handler مربوط به نمایش عکس از دیتابیس را به صورت زیر می نویسیم:

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Configuration;  
    using System.Data.SqlClient;  
    using System.IO;  
    using System.Data;  
      
    namespace Test_WebApplication.ImageCode  
    {  
        public class DisplayImage : IHttpHandler  
        {  
            string constring = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;  
            public void ProcessRequest(HttpContext context)  
            {  
                string ImageId = context.Request.QueryString["ImageId"];  
                SqlConnection conn = new SqlConnection(constring);  
                conn.Open();  
                SqlCommand cmd = new SqlCommand("select Photo from EmployeeImage where ImageId=" + ImageId, conn);  
                SqlDataReader dr = cmd.ExecuteReader();  
                dr.Read();  
                context.Response.BinaryWrite((Byte[])dr[0]);  
                conn.Close();  
                context.Response.End();  
            }  
      
            public bool IsReusable  
            {  
                get  
                {  
                    return false;  
                }  
            }  
        }  
    }  

گام هفتم:

برنامه را اجرا می کنیم:


یک عکس از کامپیوتر خود انتخاب می کنیم:

پیش نمایش عکس به صورت زیر خواهد بود:

حال روی دکمه "ثبت" کلیک می کنیم و یک پیام ثبت مشاهده خواهیم کرد:

رکورد کارمند ثبت شده به شکل زیر خواهد بود:

اگر آن را در دیتابیس چک کنید، به صورت زیر می باشد:

همانطور که در شکل مشاهده نمودید، عکس به صورت باینری در دیتابیس ذخیره شده است.

فایل های ضمیمه