ASP.NET 2.0 - 如何於網頁上新增包括圖片在內的資料至資料庫

摘要:ASP.NET 2.0 - 如何於網頁上新增包括圖片在內的資料至資料庫

我們通常會在資料庫資料表內儲存文數字之類的資料,不過在某些時候,我們也會直接將照片等二進位影像資料儲存在欄位中。有使用許多朋友詢問,在網頁上新增資料記錄時,如何讓使用者能夠一併選取圖片並寫入varbinary(max) 型別的欄位中,我們撰寫了一個網頁範例來示範如何實作。以下是這一個網頁範例的操作流程:

 

1.       請如圖表 1 所示,按下「先於資料庫中建立所需的資料表」按鈕,此舉會在「北風貿易」資料庫中建立一個名稱為「練習作者」的資料表,以便用來儲存包括照片在內的資料記錄。

基本上,此按鈕的Click事件處理常式會在SQL Server Express上執行以下的陳述式來建立「練習作者」資料表:

IF  EXISTS (SELECT * FROM sys.objects WHERE object_id =
     OBJECT_ID(N'[dbo].[
練習作者]') AND type in (N'U'))
DROP TABLE [dbo].[
練習作者];

CREATE TABLE [dbo].[
練習作者] ( 
    作者編號 int IDENTITY(1,1) NOT NULL,
    作者姓名 nvarchar(10) NULL ,
    作者電話 nvarchar(20) NULL ,
    作者玉照 varbinary(max) NULL)

 


圖表
1

 

2.       請如圖表 2 所示,按下「瀏覽」按鈕來選取照片。

 


圖表 2

 

3.       請如圖表 3 所示,於「選擇檔案」對話方塊中選取所需的照片並按下「開啟」按鈕。

 


圖表
3

 

4.       請如圖表 4 所示,按下「儲存」按鈕。

 


圖表
4

 

5.       反覆上述步驟的操作,直到您已新增完畢所需的各筆資料記錄之後,請如圖表 5 所示,按一下超連結「檢視資料表的照片資料」以便檢視我們所所上傳並寫入至資料庫欄位的資料。

 


圖表
5

 

瞭解了網頁範例的操作方式之後,我們要來檢視其開發技巧。我想,本範例最關鍵的技巧,就是如何將 FileUpload 控制項上傳至Web伺服器之照片檔的位元組陣列,並將其帶入 INSERT 陳述式的參數中。此項作業的程式碼撰寫於「上傳並寫入資料庫」按鈕的 Click 事件處理常式中,茲列示如下:

 

 

Protected Sub btnUpload_Click(ByVal sender As Object, _
  ByVal e As System.EventArgs) Handles btnUpload.Click
  If Not Me.FileUpload1.HasFile Then
      Me.lblMessage.Text = "
您必須所選一張照片。"
      Return
  End If

  '
利用 SqlConnectionStringBuilder 物件來構建連接字串。
  Dim connectStringBuilder As New SqlConnectionStringBuilder()
  connectStringBuilder.DataSource = "(local)SQLExpress"
  connectStringBuilder.InitialCatalog = "
北風貿易"
  connectStringBuilder.IntegratedSecurity = True

  Try
     '
建立連接。
     Using con As New SqlConnection(connectStringBuilder.ConnectionString)

        Dim fileLen As Integer

        '
取得上傳之照片檔的長度。

        fileLen = FileUpload1.PostedFile.ContentLength

        '
建立一個位元組陣列來持有檔案的內容。
        Dim Input(fileLen) As Byte
        Input = FileUpload1.FileBytes

        Dim updateCMD As SqlCommand = New SqlCommand( _
          "INSERT INTO
練習作者 (作者姓名, 作者電話, 作者玉照) " & _
          "VALUES (@AuthorName, @TelePhone, @Photo)"
, con)

        Dim AuthorNameParameter As SqlParameter = _
          New SqlParameter("@AuthorName", SqlDbType.NVarChar, 10)
        If Me.txtAuthorName.Text.Trim().Equals("") Then
            AuthorNameParameter.Value = "
章立民研究室"
        Else
            AuthorNameParameter.Value = Me.txtAuthorName.Text.Trim()
        End If
        updateCMD.Parameters.Add(AuthorNameParameter)

        Dim TelephoneParameter As SqlParameter = _
          New SqlParameter("@TelePhone", SqlDbType.NVarChar, 20)
        If Me.txtAuthorName.Text.Trim().Equals("") Then
            TelephoneParameter.Value = "(02)123456789"
        Else
            TelephoneParameter.Value = Me.txtTelephone.Text.Trim()
        End If
        updateCMD.Parameters.Add(TelephoneParameter)

        Dim PhotoParameter As SqlParameter = _
          New SqlParameter("@Photo", SqlDbType.Image)
        PhotoParameter.Value = Input
        updateCMD.Parameters.Add(PhotoParameter)

        con.Open()
        updateCMD.ExecuteNonQuery()
        con.Close()

        Me.lblMessage.Text = "
成功新增資料記錄"
     End Using
  Catch ex As Exception
      Me.lblMessage.Text = "
發生錯誤" & vbCrLf & ex.ToString
      Throw New Exception(ex.Message)
  End Try
End
Sub

 

我們在Visual Basic 2005 檔案 IO 與資料存取秘訣」Visual C# 2005 檔案 IO 與資料存取秘訣」這兩本書的第七章對於「大型物件(LOB) 的存取秘訣」有深入的探討,請自行參考之。

 

另外,我們會找個時間來談談ASP.NET AJAX UpdatePanel 控制項與 FileUpload 控制項的相容性問題。

 

章立民研究室 2006/12/31