[.Net] Upload รูป จาก GridView ตอนที่ 1 Save รูปลง Database
posted on 18 May 2009 11:34 by inxni in ComputerGridView ของ .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.ClickDim strSQL As String
Dim conn As SqlConnection Dim cmd As SqlCommandTry
'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 ค่ะ
#1 By Bird on 2009-05-18 16:25