データベースにある画像データを表示する方法

[アーティクル]
04/13/2010

v サンプルコードのダウンロード (aspnettips_DataBaseImage2.msi, 267 KB)

※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

サーバーへ画像をアップロードする方法については、画像をデータベースにアップロードする方法で紹介しました。ここで紹介したサンプルは、データベースに画像データをアップロードするのみでしたが、データベースにアップロードした画像データを表示するには、どのようにすれば良いでしょうか。そこで、今回は、データベースにある画像データを表示する方法を紹介します。

データベースを準備する

画像をデータベースにアップロードする方法で紹介したサンプルを使って、図1 にある 3 種類の画像を登録した Microsoft Office Acess の MDB ファイルを用意します（図2）。

図 1. データベースへ登録する画像ファイル

図 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 xmlns="http://www.w3.org/1999/xhtml" >
<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

図 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

図 4. Default.aspx の実行結果

次の方法で共有

データベースにある画像データを表示する方法

データベースを準備する

データベースにある画像データを出力するページを作成する

出力結果を表示するページを作成する

その他のリソース