كيفية حفظ مسار الصورة في قاعدة البيانات

GridViewImageOnDisk-4
في هذه المقالة ، سوف نشرح كيفية تخزين الصورة في قاعدة البيانات , هناك طريقتين لحفظ الصورة في قاعدة البيانات في تقنية ال ASP.NET هذه احد الطرق لحفظ الصورة وهي حفظ مسار الصورة بقاعدة البيانات .

أولا سنبدأ بإنشاء جدول في قاعدة البيانات التي سيتم تخزين مسار الصورة . ويكون بالشكل التالي :

1

ثانيا :نقوم باضافة اداة رفع الصورة FileUpload كما في الكود التالي :

<div>

 

<asp:FileUpload ID="FileUpload1" runat="server"/>

<asp:Button ID="btnUpload" runat="server" Text="Upload"

OnClick="btnUpload_Click" />

</div>       

 

ثالثا: نقوم بحفظ الجدول والانتقال الى مستعرض المشاريع Solution Explorer لاضافة مجلد جديد نقوم بإعادة تسميته images

2

رابعاً : Connection String

كود الاتصال بقاعدة البيانات نقوم  باضافة سلسلة الاتصال إلى ملف web.config الذي من خلاله سيتم الاتصال بقاعدة بيانات SQL Server كما في الكود التالي :

<connectionStrings>

<add name="conString"

connectionString="Data Source=.\SQLEXPRESS;database=GridDB;

Integrated Security=true"/>

</connectionStrings >

خامساً : الكود ادناه عند الضغط على زر رفع الصورة فانه يتم أخذ أسم الصورة ورفع الصورة الى مجلد الصورومن ثم يتم إدراج مسار ملف الصورة في قاعدة البيانات.

#C

 

protected void btnUpload_Click(object sender, EventArgs e)

{

if (FileUpload1.PostedFile != null)

{

string FileName = Path.GetFileName(FileUpload1.PostedFile.FileName);

 

//Save files to disk

FileUpload1.SaveAs(Server.MapPath("images/" +  FileName));

 

//Add Entry to DataBase

String strConnString = System.Configuration.ConfigurationManager

.ConnectionStrings["conString"].ConnectionString;

SqlConnection con = new SqlConnection(strConnString);

string strQuery = "insert into tblFiles (FileName, FilePath)" +

" values(@FileName, @FilePath)";

SqlCommand cmd = new SqlCommand(strQuery);

cmd.Parameters.AddWithValue("@FileName", FileName);

cmd.Parameters.AddWithValue("@FilePath", "images/" + FileName);

cmd.CommandType = CommandType.Text;

cmd.Connection = con;

try

{

con.Open();

cmd.ExecuteNonQuery();

}

catch (Exception ex)

{

Response.Write(ex.Message);

}

finally

{

con.Close();

con.Dispose();

}

}

}

VB.Net

Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As EventArgs)

If FileUpload1.PostedFile IsNot Nothing Then

Dim FileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)

 

'Save files to disk

FileUpload1.SaveAs(Server.MapPath("images/" & FileName))

 

'Add Entry to DataBase

Dim strConnString As [String] = System.Configuration. _

ConfigurationManager.ConnectionStrings("conString"). _

ConnectionString

Dim con As New SqlConnection(strConnString)

Dim strQuery As String = "insert into tblFiles (FileName, FilePath)" _

& " values(@FileName, @FilePath)"

Dim cmd As New SqlCommand(strQuery)

cmd.Parameters.AddWithValue("@FileName", FileName)

cmd.Parameters.AddWithValue("@FilePath", "images/" & FileName)

cmd.CommandType = CommandType.Text

cmd.Connection = con

Try

con.Open()

cmd.ExecuteNonQuery()

Catch ex As Exception

Response.Write(ex.Message)

Finally

con.Close()

con.Dispose()

End Try

End If

End Sub

الشكل أدناه يعرض كيف يتم تخزين مسار الصورة في قاعدة البيانات .

GridViewImageOnDisk-3

سابعا : نقوم باضافة اداة ال GridView لعرض الصورة من قاعدة البيانات التي تم رفعها سابقاً ,  كذلك كما في الكود التالي :

<div>

<br />

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false"

Font-Names = "Arial" >

<Columns>

<asp:BoundField DataField = "ID" HeaderText = "ID" />

<asp:BoundField DataField = "FileName" HeaderText = "Image Name" />

<asp:ImageField DataImageUrlField="FilePath" ControlStyle-Width="100"

ControlStyle-Height = "100" HeaderText = "Preview Image"/>

</Columns>

</asp:GridView>

</div>

 ثامنا : يتم تغيير حقل الصورة الى اداة الصورة image كما الشكل التالي :

نقوم بالضغط على المثلث الصغير Smart Tag  الذي بجانب اداة ال GridView تظهر لنا قائمة نقوم بالضغط على Edit Columns :

444

بعد الخطوة السابقة سوف تظهر لنا نافذة نقوم نتغير حقل FilePath الى ImageField كما الشكل التالي :
55

 

تاسعا: نقوم باضافة الكود التالي عند حدث تحميل الصفحة :

#C

protected void Page_Load(object sender, EventArgs e)

{

DataTable dt = new DataTable();

String strConnString = System.Configuration.ConfigurationManager.

ConnectionStrings["conString"].ConnectionString;

string strQuery = "select * from tblFiles order by ID";

SqlCommand cmd = new SqlCommand(strQuery);

SqlConnection con =  new SqlConnection(strConnString);

SqlDataAdapter sda = new SqlDataAdapter();

cmd.CommandType = CommandType.Text;

cmd.Connection = con;

try

{

con.Open();

sda.SelectCommand = cmd;

sda.Fill(dt);

GridView1.DataSource = dt;

GridView1.DataBind();

}

catch (Exception ex)

{

Response.Write(ex.Message);

}

finally

{

con.Close();

sda.Dispose();

con.Dispose();

}

}

 

  VB.Net

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

Dim dt As New DataTable()

Dim strConnString As [String] = System.Configuration. _

ConfigurationManager.ConnectionStrings("conString")_

.ConnectionString()

Dim strQuery As String = "select * from tblFiles order by ID"

Dim cmd As New SqlCommand(strQuery)

Dim con As New SqlConnection(strConnString)

Dim sda As New SqlDataAdapter()

cmd.CommandType = CommandType.Text

cmd.Connection = con

Try

con.Open()

sda.SelectCommand = cmd

sda.Fill(dt)

GridView1.DataSource = dt

GridView1.DataBind()

Catch ex As Exception

Response.Write(ex.Message)

Finally

con.Close()

sda.Dispose()

con.Dispose()

End Try

End Sub

عاشراً : نقوم بتشغيل المشروع وعرضه بالشكل التالي :

 

GridViewImageOnDisk-4
لتحميل المشروع من هنا .