Devido a milhares de dúvidas nos fóruns que freqüento e centenas
de e-mails sobre dúvidas nesse assunto, resolvi iniciar meus artigos com esse
assunto que deixa muitos desenvolvedores ainda de cabelo em pé.
Não que não exista algo sobre o assunto, pois nosso amigo Carlos de Mattos
soluciona esse problema, mas em Visual Basic.NET ainda não foi discutido
esse assunto em um artigo.
Usaremos o Banco de Dados Access XP, por ser mais acessível, e
permitir a todos os iniciantes acompanhar esse artigo. Os mais
experientes poderão utilizar o SQL Server, bastando mudar um pouco mais o código
em VB.NET.
Vamos ao Banco de Dados:
Crie um Banco de Dados Access chamado Album.mdb, clicando em
"Criar tabela no modo estrutura " e crie uma tabela conforme a figura abaixo,
nomearemos de "tblImagens".
Inserindo as Imagens no Banco de dados.
Agora criaremos as funções necessários para Inserção da figura na base de
dados. Crie um Webform chamado default.aspx com o seguinte
código.
| 55 |
<body> |
|
|
56 |
<form
Runat="server"> |
|
|
57 |
<font
face="arial" size="4">Salvando arquivos no Banco de
dados</font><br><br> |
|
|
57 |
<table
border="0" cellpadding="4" cellspacing="0"> |
|
|
59 |
<tr> |
|
|
60 |
<td align="right"> |
|
|
61 |
<p>Imagem:</p> |
|
|
62 |
</td> |
|
|
63 |
<td> |
|
|
64 |
<input type="file" Id="tbImagem" Runat="server" /> |
|
|
65 |
</td> |
|
|
66 |
</tr> |
|
|
67 |
<tr> |
|
|
68 |
<td align="right"> |
|
|
69 |
<ASP:TextBox Id="tbNome" Runat="server" /> |
|
|
70 |
</td> |
|
|
71 |
</tr> |
|
|
72 |
<tr> |
|
|
73 |
<td></td> |
|
|
74 |
<td align="right"> |
|
|
75 |
<ASP:Button Id="Button1" Runat="server" Text="Enviar" OnClick=
"SalvaImagem" /> |
|
|
76 |
</td> |
|
|
78 |
</tr> |
|
|
79 |
</table> |
|
|
80 |
<ASP:Label Id="Label1" Runat="server" CssClass="erro" /> |
|
|
81 |
</form> |
|
|
82 |
<table border="0" cellpadding="4" cellspacing="0"> |
|
|
83 |
<tr> |
|
|
84 |
<td><a href="banco.aspx">Banco de
Dados</a></td> |
|
|
85 |
</tr> |
|
|
86 |
</table> |
|
|
87 |
</body> |
|
Execute esse Webform, insira uma figura agora, e logo após abra seu Banco de
Dados, para conferir se realmente ela está lá.
Exibindo conteúdo do Banco de Dados
Essa tarefa parece até facil nesse momento, mas e exibir as imagens? Você verá que isso era um problema sério, pois o DataGrid não interpreta o array de Bytes como uma imagem, e isso é frustrante.
Agora, exibiremos criando um novo Webform, chamado banco.aspx.
| 1 |
<%@ Page Language="VB"
Debug="True"%> |
|
|
2 |
<%@ Import
Namespace="System.Data" %> |
|
|
3 |
<%@ Import
Namespace="System.Data.OleDb" %> |
|
|
4 |
<SCRIPT
Runat="Server"> |
|
|
5 |
|
|
|
6 |
Sub
Page_Load(Obj As Object, E As System.EventArgs) |
|
|
7 |
If Not Page.IsPostBack
Then |
|
|
8 |
Connect() |
|
|
9 |
End If |
|
|
10 |
End
Sub |
|
|
11 |
|
|
|
12 |
Sub
Connect() |
|
|
13 |
Dim Conn As New
OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data
Source=c:\data\Album.mdb") |
|
|
14 |
Dim Cmd As New
OleDbCommand("SELECT * FROM tblImagens", Conn) |
|
|
15 |
Dim objReader As
OleDbDataReader |
|
|
16 |
|
|
|
17 |
Try |
|
|
18 |
Cmd.Connection.Open() |
|
|
19 |
objReader= Cmd.ExecuteReader() |
|
|
20 |
Catch Ex As
OleDbException |
|
|
21 |
Me.Label1.Text= "Desculpe, erro ao acessar a Base de Dados." |
|
|
22 |
Finally |
|
|
23 |
Me.DataGrid1.DataSource= objReader |
|
|
24 |
Me.DataGrid1.DataBind() |
|
|
25 |
Cmd.Connection.Close() |
|
|
26 |
End
Try |
|
|
27 |
End sub |
|
|
28 |
|
|
|
29 |
</SCRIPT> |
|
Nesta página nada fiz além de recuperar
o conteúdo da base de dados com a interface IDBDataReader, vocês devem estar se
perguntando nesse momento aonde está a imagem?
Veja a interface HTML deste Webform.
| 43 |
<body> |
|
|
44 |
<form Runat="Server"> |
|
|
45 |
<ASP:Label
Id="Label1" Runat="Server" /> |
|
|
46 |
<ASP:DataGrid
Id="DataGrid1" Runat="server" |
|
|
47 |
Width="300" |
|
|
48 |
Cellpadding= "6" |
|
|
49 |
Cellspacing= "0" |
|
|
50 |
Font-Names="verdana" |
|
|
51 |
Font-Size="8pt" |
|
|
52 |
BorderColor="lightblue" |
|
|
53 |
HeaderStyle-BackColor="lightblue" |
|
|
54 |
ItemStyle-BackColor="aliceblue" |
|
|
55 |
AlternatingItemStyle-BackColor="white" |
|
|
56 |
GridLines="Both" |
|
|
57 |
AutoGenerateColumns="false" > |
|
|
58 |
<Columns> |
|
|
59 |
<ASP:BoundColumn HeaderText="<b>Id</b>" DataField="Id"
/> |
|
|
60 |
<ASP:BoundColumn HeaderText="<b>Nome</b>" DataField="Nome"
/> |
|
|
61 |
<ASP:BoundColumn HeaderText="<b>Bytes</b>" DataField="Tamanho"
/> |
|
|
62 |
<ASP:TemplateColumn HeaderText="<b>Ver</b>" > |
|
|
63 |
<ItemTemplate> |
|
|
64 |
<center><a href="view.aspx?cod=<%#
DataBinder.Eval(Container.DataItem, "Id")
%>">Ver</a></center> |
|
|
65 |
</ItemTemplate> |
|
|
66 |
</ASP:TemplateColumn> |
|
|
67 |
</Columns> |
|
|
68 |
</ASP:DataGrid> |
|
|
96 |
</form>
|
|
|
70 |
</body> |
|
Podemos ver claramente que o segredo parece estar na TemplateColumn
das linhas 62-66 no link para outra página.
Vejamos a imagem:
criaremos agora a tão esperada página view.aspx, que nos levará a
exibir essa imagem.
| 1 |
<%@ Page
Language="VB" Debug="true"%> |
|
|
2 |
<SCRIPT
Runat="server"> |
|
|
3 |
|
|
|
4 |
Sub Page_Load(Obj As Object, E As
System.EventArgs) |
|
|
5 |
If Not Page.IsPostBack
Then |
|
|
6 |
Me.Image1.ImageUrl= "img.aspx?cod=" & Request.Params("cod") |
|
|
7 |
End If |
|
|
8 |
End Sub |
|
|
9 |
|
|
|
10 |
</SCRIPT> |
|
HTML de view.aspx
| 23 |
<body> |
|
|
24 |
<form Runat="server"> |
|
|
25 |
<ASP:Image Id="Image1"
Runat="server" /> |
|
|
26 |
</form> |
|
|
27 |
<table border="0" cellpadding="4"
cellspacing="0"> |
|
|
28 |
<tr> |
|
|
29 |
<td><a href="banco.aspx">Retornar</a></td> |
|
|
30 |
<td><a href="default.aspx">Inserir nova
imagem</a></td> |
|
|
31 |
</tr> |
|
|
32 |
</table> |
|
|
33 |
</body> |
|
Até o momento não exibimos a tão esperada imagem no Navegador, mas finalmente
ela irá aparecer em um novo Webform e ultimo desse arquivo.
Então mão a obra, vamos criar img.aspx.
| 1 |
<%@ Page
Language="VB" Debug="true"%> |
|
|
2 |
<%@ Import
Namespace="System.Data" %> |
|
|
3 |
<%@ Import
Namespace="System.Data.OleDb" %> |
|
|
4 |
<SCRIPT
Runat="server"> |
|
|
5 |
|
|
|
6 |
Private Sub Page_Load(sender As Object, e As
System.EventArgs) |
|
|
7 |
ExibeIMG() |
|
|
8 |
End Sub |
|
|
9 |
|
|
|
10 |
Sub ExibeIMG() |
|
|
11 |
Dim Conn As New
OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data
Source=c:\data\Album.mdb") |
|
|
12 |
Dim strSQL As
String= "SELECT * FROM tblImagens WHERE Id=" &
Request.Params("cod") |
|
|
13 |
Dim Cmd As New
OleDbCommand(strSQL, Conn) |
|
|
14 |
|
|
|
15 |
Cmd.Connection.Open() |
|
|
16 |
Dim dr As
OleDbDataReader= Cmd.ExecuteReader |
|
|
17 |
|
|
|
18 |
If dr.Read()
Then |
|
|
19 |
Response.ContentType = "image/jpeg" |
|
|
20 |
Response.OutputStream.Write(CType(dr("Imagem"), Byte()), 0,
CInt(dr("Tamanho"))) |
|
|
21 |
End
If |
|
|
22 |
|
|
|
23 |
Cmd.Connection.Close() |
|
|
24 |
Response.End()
|
|
|
25 |
End Sub |
|
|
26 |
</SCRIPT> |
|
Finalmente terminamos a tão esperada Webform para visualização das imagens
graças a função Response.OutputStrean.Write().
Conclusão:
Acabamos de criar uma curiosa funcionalidade, é preciso lembrar que uma imagem
em Banco de Dados torna seu tamanho considerável, sem contar o
desempenho na exibição da imagem, pois a mesma necessita ser retirada por
processos programáticos aqui descritos enquanto se ela estivesse no diretório,
esse desempenho na exibição seria bem maior.
A partir desse artigo vocês estão aptos a alterar e exibir imagens de
formas totalmente diferentes.
