GridView ของ .Net มันช่างเป็นของเล่นที่น่ารักซะจริงๆ ตบๆเขี่ยๆก็ได้หน้างามๆมา 1 หน้า หุหุหุ ถูกใจหลาย

แต่ไม่นานมานี้ต้องทำอะไรที่เกินตบๆเขี่ยๆไปนิดหน่อย เลยต้องวิ่งมาจดไว้กันลืม

นั่นก็คือการ Upload และแก้ไขรูปด้วย GridView  Feature ที่ไม่ได้ Build in มาให้ แต่เพิ่มเองได้

ตอนแรกว่าจะเขียนให้จบใน entry เดียว แต่ทว่า..................ยาวเฟร้ย  

เพราะฉะนั้นตอนแรกเอาแค่สร้าง DB กะ Save รูปพอนะจ๊ะ ตอนเอารูปมาโชว์กะแก้รูปจะค่อยๆกระดึ๊บตามมา

 

Upload และแก้ไขรูป จาก GridView - ตอนที่ 1 Save รูปลง Database

ความรู้พื้นฐานที่ควรมีก่อนอ่าน: ASP.Net, SQL Server, VS2005

จริงๆแล้วตอนนี้มันไม่ได้มีเอี่ยวกะ GridView เลยล่ะ แค่ Save รูปลง DB เฉยๆ แต่ไม่มีรูปก็ test ไม่ได้เลยต้องทำ step นี้ก่อน

ขั้นตอนแรก สร้าง DB กับ Table ที่จะใช้เก็บไฟล์

ไม่ต้องพูดพร่ำทำเพลง สร้าง DB ชื่อ DB_Image มา 1 อันแล้วเอา script ไปสร้าง Table โลด

CREATE TABLE [dbo].[TB_Image] (
 [ID] [int] IDENTITY (1, 1) NOT NULL ,                        --ID เป็น running number เอาไว้เป็น Primary Key
 [ImageFile] [image] NULL ,                                         --เก็บรูปใน Field นี้
 [Description] [text] COLLATE Thai_CI_AS NULL         --เก็บ Description
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

ขั้นที่ 2 เขียนโค้ด

2.1 สร้าง WebSite ให้ชื่อว่า ImageWithGridView

2.2 ใส่ ConnectionString เตรียมไว้ใน web.config

<connectionStrings> <add name="ImageConnectionString" connectionString="Data Source=.;Initial Catalog=DB_Image;User ID=sa;Password=sa" providerName="System.Data.SqlClient"/>

connectionStrings>

2.3 เตรียมหน้าสำหรับ insert ข้อมูล

เปิดหน้า default.aspx ขึ้นมา จัดการลาก Control มาแปะ แล้วตั้งชื่อให้เรียบร้อย

หรือถ้าขี้เกียจก็ copy ข้างล่างไปแปะได้เลย

<table>

<tr>

<td colspan="2" style="text-align: center">

<b>Insert New</b></td>

</tr>

<tr>

<td style="width: 85px">

JPG File:

</td>

<td style="width: 249px">

<asp:FileUpload ID="fuImage" runat="server" /></td>

</tr>

<tr>

<td style="width: 85px;">

Description:

</td>

<td style="width: 249px;">

<asp:TextBox ID="tbDescription" runat="server" Width="232px"></asp:TextBox></td>

</tr>

<tr>

<td colspan="2" style="text-align: center">

<asp:Button ID="btnInsert" runat="server" Text="Insert" /></td>

</tr>

</table>

2.4 เขียนโค้ดกันซะที

Double Click ที่ปุ่ม Insert เพื่อไปที่ไฟล์ Default.aspx.vb 

แล้วก็.................

ลอกไปแปะ 

วิธีการทำงานของโค้ดข้างล่างก็เป็นการ Insert ธรรมดา เพียงแต่ใช้ SQLParameter มาช่วยตอนใส่รูปลงไปเท่านั้นเอง

Protected Sub btnInsert_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnInsert.Click

Dim strSQL As String

Dim conn As SqlConnection Dim cmd As SqlCommand

Try

'Insert Query

strSQL = "INSERT INTO TB_Image(ImageFile, Description) VALUES(@ImageFile, @Description)"

'Create Connection

conn = New SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings("ImageConnectionString").ConnectionString)

'Create Command

cmd = New SqlCommand(strSQL, conn)

'Read Image

Dim bs As Byte()

If Me.fuImage.HasFile Then

'Check if JPEG

If System.IO.Path.GetExtension(Me.fuImage.FileName).ToLower = ".jpg" Then

'Read from stream

ReDim bs(Me.fuImage.PostedFile.InputStream.Length - 1) Me.fuImage.PostedFile.InputStream.Read(bs, 0, Me.fuImage.PostedFile.InputStream.Length)

Else

'Handle Error Here

End If

Else

'Handle Error Here

End If

'Add to Parameter

If bs Is Nothing Then

Dim param As New SqlParameter("ImageFile", SqlDbType.Image)

param.Value = DBNull.Value

cmd.Parameters.Add(param)

Else

Dim param As New SqlParameter("ImageFile", SqlDbType.Image)

param.Value = bs

cmd.Parameters.Add(param)

End If

cmd.Parameters.AddWithValue("Description", Me.tbDescription.Text)

conn.Open()

cmd.ExecuteNonQuery()

Catch ex As Exception

'Handle Error Here

Finally

If Not conn Is Nothing Then

conn.Close()

conn = Nothing

End If

End Try

End Sub

2.5 Test 

ถ้าใส่รูปเข้าไปแล้วได้ข้อมูลประมาณนี้ก็ OK สำมะเหร็จ

 

 

 

แต่จะมีคนอ่านรู้เรื่องมั้ยเนี่ย สั้นไปมั้ย สงสัยต้องหาเหยื่อมาสังเวยซักคนสองคน  

คราวหน้าต่อด้วยการเอารูปขึ้นมาโชว์ใน GridView ค่ะ

 

Comment

Comment:

Tweet

http://www.upload-thai.com/download.php?id=39a399ff3f9a6c5e73c5972ea8c38ba9

#4 By (61.7.175.22) on 2009-10-11 11:40

good มากกกกกกเลยอ่ะ

#3 By wutty (203.155.74.82) on 2009-06-02 16:47

จัดแบบนี้มาเรื่อยๆเลย ผมอ่าน confused smile

#2 By TonHor on 2009-05-31 12:04

confused smile มาทักทายคับ

#1 By Bird on 2009-05-18 16:25