最終更新日 2006 年 4 月 25 日
.gif)
v
サンプル コードのダウンロード
(aspnettips_DataBaseImage2.msi, 267 KB)
※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。
サーバーへ画像をアップロードする方法については、画像をデータベースにアップロードする方法で紹介しました。ここで紹介したサンプルは、データベースに画像データをアップロードするのみでしたが、データベースにアップロードした画像データを表示するには、どのようにすれば良いでしょうか。そこで、今回は、データベースにある画像データを表示する方法を紹介します。
データベースを準備する
画像をデータベースにアップロードする方法で紹介したサンプルを使って、図1 にある 3 種類の画像を登録した Microsoft Office Acess の MDB ファイルを用意します（図2）。
.gif)
図
1.
データベースへ登録する画像ファイル
.gif)
図
2. IMAGE.mdb
の
IMGINFO
テーブル
データベースにある画像データを出力するページを作成する
はじめに、データベースにある画像データを取得し、出力するページを作成します（OutputDBImage.aspx）。このページはデータを出力するのみなので、リスト2 のように Page プロパティの設定のみにします。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="OutputDBImage.aspx.vb" Inherits="OutputDBImage" %>
|
リスト1．OutputDBImage.aspx
次に、ページの Load イベントをハンドリングし、データベースから画像データを読み込み、出力するコードを実装します（リスト3）。今回のサンプルでは、取得する画像データは、HTTP クエリ文字列で指定された ID によって抽出し、OleDbDataReader を使ってデータを読み込みます。
画像データを出力するには、出力する画像データの HTTP MIME タイプを指定し、画像データをバイナリ データとして出力する必要があります。
HTTP MIME タイプを指定するには、HttpResponse の ContentType プロパティにデータベース テーブルの IMGTYPE フィールドに登録されている HTTP MIME タイプを指定します。画像データをバイナリ データとして出力するには、HttpResponse の BinaryWrite メソッドを使い、データベース テーブルの IMGDATA フィールドに登録されている画像データを出力します。
Partial Class OutputDBImage
Inherits System.Web.UI.Page
Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
' ID 取得
Dim intId As Integer = 0
Integer.TryParse(Request.QueryString("id"), intId)
' DB を開く
Dim oleConn As New Data.OleDb.OleDbConnection()
oleConn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + _
AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "IMAGE.MDB"
oleConn.Open()
' データの読込み
Dim cmdSelect As New Data.OleDb.OleDbCommand
cmdSelect.Connection = oleConn
cmdSelect.CommandText = "SELECT * FROM IMGINFO WHERE ID=?"
cmdSelect.Parameters.Add("ID", Data.OleDb.OleDbType.Integer, 4, "ID").Value = intId
Dim rdrDB As Data.OleDb.OleDbDataReader = cmdSelect.ExecuteReader()
If rdrDB.Read() Then
Response.ContentType = rdrDB("IMGTYPE")
Response.Flush()
Response.BinaryWrite(CType(rdrDB("IMGDATA"), Byte()))
Response.End()
End If
cmdSelect.Dispose()
' DB を閉じる
oleConn.Close()
oleConn.Dispose()
End Sub
End Class
|
リスト2．OutputDBImage.aspx.vb に追加するコード
出力結果を表示するページを作成する
OutputDBImage.aspx が出力する画像データを表示するには、Image コントロールを使用します。OutputDBImage.aspx に渡す ID は、データベースから列挙してきたものを ListBox コントロールに表示して指定することにします（リスト3、およびリスト4）。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>Sample Page</title>
</head>
<body>
<form id="MyForm" runat="server">
<div>
<table border="1">
<tr>
<td>
画像番号
</td>
<td>
<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="true"></asp:ListBox>
</td>
</tr>
<tr>
<td>
イメージ
</td>
<td>
<asp:image ID="Image1" ImageUrl="~/dummy.gif" runat="server"></asp:image>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="ButtonDownload" Text="ダウンロード" Runat="server" UseSubmitBehavior="False"></asp:Button>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
リスト3．Default.aspx
.gif)
図
3 Default.aspx
のデザイナ画面
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If ListBox1.Items.Count < 1 Then
' DB を開く
Dim oleConn As New Data.OleDb.OleDbConnection()
oleConn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + _
AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "IMAGE.MDB"
oleConn.Open()
' データの読込み
Dim cmdSelect As New Data.OleDb.OleDbCommand
cmdSelect.Connection = oleConn
cmdSelect.CommandText = "SELECT * FROM IMGINFO"
Dim rdrDB As Data.OleDb.OleDbDataReader = cmdSelect.ExecuteReader()
ListBox1.DataSource = rdrDB
ListBox1.DataTextField = "NAME"
ListBox1.DataValueField = "ID"
ListBox1.DataBind()
cmdSelect.Dispose()
' DB を閉じる
oleConn.Close()
oleConn.Dispose()
End If
End Sub
Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ListBox1.SelectedIndexChanged
Image1.ImageUrl = "~/OutputDBImage.aspx?id=" + Request("ListBox1")
End Sub
End Class |
リスト4．Default.aspx.vb
.gif)
図
4. Default.aspx
の実行結果