Gravar imagem e visualizar em um jsp. como fazer?

10 respostas
W

Olá a todos aki do forum,

Sou iniciante em java pra web e estou querendo criar uma galeria de imagens mais não sei como trabalhar com imagens, como gravar em um banco de dados através de um upload e como fazer com que a imagem apareça no jsp.
estou tentando fazer da seguinte forma:

tenho um form que pega imagem o código abixo mostra como?

<form action="inserirImagem.jsp" method="PSOT">
Imagem:<input type="file" name="imagem"><br/>
<input type="submit" valeu="Gravar">
</form>

na página inserirImagem.jsp tenho o codigo como exemplo:

<%
Connection con = null;
PreparedStatement stmt = null;
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost/mysql","usuario","senha");
String sql="insert into foto(foto)values('"+request.parameter("imagem")+"');
stmt = con.prepareStatement(sql);
stmt.executeUpdate(sql);
%>

para exibir no página jsp uso seguinte codigo:

Connection con = null;
PreparedStatement stmt = null;
ResultSet rs= null;
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost/mysql","usuario","senha");
String sql="select foto from foto");
stmt = con.prepareStatement(sql);
rs = stmt.executeQuery();
while(rs.next()){
%><table>
<tr><td><%=rs.getString("foto")%></td></tr>
</table>
<%
}

Isso é o que eu faço pra gravar imagem no banco e exibir na página jsp. mais ao exibir exibe apenas o caminho da imagem. estou usando o banco de dados mysql e o campo onde armazeno a foto é blob. qual é a maneira correta de fazer a exibição da imagem na jsp.

GOSTARIA QUE ALGUÉM PUDESSE ME EXPLICAR E SE POSSIVEL MOSTRAR EXEMPLO PRA FACILITAR O APRENDIZADO!!

agradeço desde já

10 Respostas

G

Olá Wanderley!
Eu tenho uns tópicos tratando do assunto com vários posts com códigos e imagens, acho que pode te ajudar:
http://www.guj.com.br/posts/list/204564.java
http://www.guj.com.br/posts/list/205880.java
http://www.guj.com.br/posts/list/204591.java
Eu uso o framework VRaptor 3.
Abraço!

W

Estou conseguindo salvar a url da imagem no banco só que quando retorna a url vem errada não vem definindo quais são os diretórios corretamente se salvo o caminho da seguinte forma: c:\site\imagens\imagem.jsp no banco mysql as barras são removidas e fica da sseguinte forma: c:siteimagemimagem.jpg. como posso resolver esse problema pois é só isso que está faltando pra poder exibir a imagem na página.

G

Têm como postar a sua JSP para mostrar as imagens e o seu método de salvar a imagem lá no componente?

W

Essa é a Clientes.jsp que exibe os dados do banco:

<form id="form1" name="form1" method="post" action="">
  <div align="center"><span class="style1">Registro de Clientes no sistema</span>
  </div>
  <div>
  		<div align="center"><a href="cad_cliente.jsp" class="style2">Cadastrar Cliente</a> </div>
  </div>
  <p>&nbsp;</p>
  <table width="1117" border="1" align="center">
    <tr>
      <td width="53">Código</td>
      <td width="207">Cliente</td>
      <td width="171">Endereço</td>
      <td width="52"></td>
      <td width="183">Bairro</td>
      <td width="163">Cidade</td>
      <td width="125">Telefone Comercial</td>
      <td width="125">Foto</td>
      <td width="52">Alterar</td>
      <td width="53">Excluir</td>
    </tr>

<%
	Connection conn = null;
    Statement st = null;
    ResultSet rs = null;
	try{
		Class.forName("org.postgresql.Driver").newInstance();
            conn = DriverManager.getConnection("jdbc:postgresql://localhost/banco",
            "usuario","senha");
            st = conn.createStatement();
            rs = st.executeQuery("select codigo,nome,endereco,numero,bairro,cidade,fonecom, foto from cliente");
            while(rs.next()) {	
	%>

    <tr>
      <td height="67"><%= rs.getString("codigo") %></td>
        <td><%= rs.getString("nome") %></td>
        <td><%= rs.getString("endereco") %></td>
        <td><%= rs.getString("numero") %></td>
        <td><%= rs.getString("bairro") %></td>
        <td><%= rs.getString("cidade") %></td>
        <td><%=rs.getString("fonecom")%></td>
        <td><img src="<%=rs.getString("foto")%>" width="100" height="100" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>

  <%
  }
  	}catch(ClassNotFoundException erro){
		out.println("Problema com a Classe Driver JDBC " +erro);
	}catch(SQLException ex){
		out.println("Problema com o banco de dados" +ex);	
	}
  %>
  </table>
</form>

Abaixo tenho a cad_cliente.jsp que recebe os dados do cliente:

<body>
<div align="center"><span class="style1">Cadastro de Clientes</span>
</div>
<form action="inserirCliente.jsp" method="post">
  <table>
    <tr>
      <td> Nome:</td>
      <td><input type="text" name="nome" id="nome" />
      </td>
      <td> Endereço:</td>
      <td><input type="text" name="endereco" id="endereco" />
      </td>
      <td> nº: </td>
      <td><input type="text" name="num" id="num" />
      </td>
    </tr>
    <tr>
      <td> Bairro:</td>
      <td><input type="text" name="bairro" id="bairro" />
      </td>
      <td> Cidade: </td>
      <td><input type="text" name="cidade" id="cidade" />
      </td>
    </tr>
    <tr>
      <td> RG: </td>
      <td><input type="text" name="rg" id="rg" />
      </td>
      <td> CPF:</td>
      <td><input type="text" name="cpf" id="cpf" />
      </td>
    </tr>
    <tr>
      <td> Data Nascimento:</td>
      <td><input type="text" name="datanasc" id="datanasc" />
      </td>
      <td> Data Cadastro:</td>
      <td><label>
        <input type="text" name="datacad" id="datacad" />
      </label></td>
    </tr>
    <tr>
      <td> Fone Residêncial:</td>
      <td><input type="text" name="foneres" id="foneres" />
      </td>
      <td> Fone Comercial:</td>
      <td><label>
        <input type="text" name="fonecom" id="fonecom" />
      </label></td>
    </tr>
    <tr>
      <td> Email: </td>
      <td><label>
        <input type="text" name="email" id="email" />
      </label></td>
      <td> Sexo:</td>
      <td><label>
        <input type="radio" name="radio" id="rd_m" value="rd_m" />
        Masculino
        <input type="radio" name="radio" id="rd_f" value="rd_f" />
        Feminino </label></td>
    </tr>
    <tr>
      <td> Foto:</td>
      <td><label>
        <input type="file" name="foto" id="foto" />
      </label></td>
    </tr>
    <tr>
      <td><label>
        <input type="submit" name="cadastrar" id="cadastrar" value="Cadastrar" />
      </label></td>
      <td><label>
        <input type="reset" name="limpar" id="limpar" value="Limpar" />
      </label></td>
    </tr>
  </table>
</form>

E esse é o inserirCliente.jsp que recebe os dados do form cad_cliente.jsp para inserir os dados no banco:

<body>
	<%
	Connection conn = null;
	PreparedStatement pst = null;
try {
Class.forName("org.postgresql.Driver").newInstance();
conn = DriverManager.getConnection("jdbc:postgresql://localhost/banco","usuario","senha");
String SQL = "INSERT INTO cliente(nome,endereco,numero,bairro,cidade,rg,cpf,datacad,"+
"datanasc,foneres,fonecom,email,foto) " +
"values ('"+request.getParameter("nome")+
	"','"+request.getParameter("endereco")+
	"','"+request.getParameter("num")+
	"','"+request.getParameter("bairro")+
	"','"+request.getParameter("cidade")+
	"','"+request.getParameter("rg")+
	"','"+request.getParameter("cpf")+
	"','"+request.getParameter("datanasc")+
	"','"+request.getParameter("datacad")+
	"','"+request.getParameter("foneres")+
	"','"+request.getParameter("fonecom")+
	"','"+request.getParameter("email")+
	//"','"+request.getParameter("sexo")+
	"','"+request.getParameter("foto")+"');";
//out.println(SQL);
	pst = conn.prepareStatement(SQL);
	pst.executeUpdate();
	response.sendRedirect("Clientes.jsp");
} catch (Exception ex) {
    out.println("Problemas com a conexão!"+ex);
    	ex.printStackTrace();
} finally {
if (pst != null) pst.close();
if (conn != null) conn.close();
}

%>

<h2>Dados Inseridos com sucesso!</h2>  
</body>

Mais como ja falei o problema está na forma como o postgres ou o mysql está salvando o caminho teria como tratar isso? Já fiz o teste nos dois bancos e dá a mesma coisa. será que pode ser o sistema operacional ou o navegador.

W

ja descobri que no banco de dados ao salvar url não salva a barra para definir a separeção de diretórios e que tem que ser definido um script para quando fizer a chama fazer a formatação para retornar corretamente, mais não sei como fazer alguém teria alguma idéia?

W

Bom como ja sei que o banco não salva as barras para diferenciar os diretórios estive pensando em quando for enviar a url para o banco fazer um tratamento na url para substituir a barra por outro caracter para que possa ser salvo no banco. quando for fazer chamada para exibir na página jsp criar um novo script para tratar e fazer a subustituição do caracter que foi salvo no banco pela a barra. mais o problema é que não sei como fazer isso, :). alguém poderia me ajudar ou dá uma outro solução.

G

Oi Wanderley.

Eu consigo salvar o caminho completo de outra forma, seguindo a lógica do VRaptor, no seu caso eu acho que colocando um caminho pra salvar junto com o que é recebido via request resolva, algo do tipo:

<%
Connection con = null;
PreparedStatement stmt = null;
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost/mysql","usuario","senha");
String caminho = "C:\pasta\das\fotos"
String sql="insert into foto(foto)values('"+request.parameter(caminho + ("imagem")"');
stmt = con.prepareStatement(sql);
stmt.executeUpdate(sql);
%>

No postgreSQL aqui salva dos dois jeitos:

Abraço!

L

Pelo amor dos ETs, não faça conexão de banco via JSP, isso era usado (erradamente) na década de 90.

[]s

W

Guevara:
Oi Wanderley.

Eu consigo salvar o caminho completo de outra forma, seguindo a lógica do VRaptor, no seu caso eu acho que colocando um caminho pra salvar junto com o que é recebido via request resolva, algo do tipo:

<%
Connection con = null;
PreparedStatement stmt = null;
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost/mysql","usuario","senha");
String caminho = "C:\pasta\das\fotos"
String sql="insert into foto(foto)values('"+request.parameter(caminho + ("imagem")"');
stmt = con.prepareStatement(sql);
stmt.executeUpdate(sql);
%>

No postgreSQL aqui salva dos dois jeitos:

Abraço!

olá Guevara,
agradeço a ajuda que vc está me dando.
ontem consegui fazer com que o caminha da imagem fosse salva no banco corretamente usando o netbeans antes estava usando o dreamwever e o código está um pouco diferente. da forma com faço no dreamwever a barra não é salva no banco mais como faço no netbeans ele é salvo mais ainda não exibe a imagem. abaixo temos o código de cada página que foi feita no netbeans.

esta é a página do form que se chama cadCliente.jsp:

<%-- 
    Document   : CadCliente
    Created on : 12/05/2010, 20:03:46
    Author     : SIDNEY MELQUIADES
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <style type="text/css">
<!--
.style1 {
	color: #FF0000;
	font-size: 36px;
}
-->
</style>
</head>

<body>
<div align="center"><span class="style1">Cadastro de Clientes</span>
</div>
<form action="inserirCliente.jsp" method="post">
  <table>
    <tr>
      <td> Nome:</td>
      <td><input type="text" name="nome" id="nome" />
      </td>
      <td> Endereço:</td>
      <td><input type="text" name="endereco" id="endereco" />
      </td>
      <td> nº: </td>
      <td><input type="text" name="num" id="num" />
      </td>
    </tr>
    <tr>
      <td> Bairro:</td>
      <td><input type="text" name="bairro" id="bairro" />
      </td>
      <td> Cidade: </td>
      <td><input type="text" name="cidade" id="cidade" />
      </td>
    </tr>
    <tr>
      <td> RG: </td>
      <td><input type="text" name="rg" id="rg" />
      </td>
      <td> CPF:</td>
      <td><input type="text" name="cpf" id="cpf" />
      </td>
    </tr>
    <tr>
      <td> Data Nascimento:</td>
      <td><input type="text" name="datanasc" id="datanasc" />
      </td>
      <td> Data Cadastro:</td>
      <td><label>
        <input type="text" name="datacad" id="datacad" />
      </label></td>
    </tr>
    <tr>
      <td> Fone Residêncial:</td>
      <td><input type="text" name="foneres" id="foneres" />
      </td>
      <td> Fone Comercial:</td>
      <td><label>
        <input type="text" name="fonecom" id="fonecom" />
      </label></td>
    </tr>
    <tr>
      <td> Email: </td>
      <td><label>
        <input type="text" name="email" id="email" />
      </label></td>
      <td> Sexo:</td>
      <td><label>
        <input type="radio" name="radio" id="rd_m" value="rd_m" />
        Masculino
        <input type="radio" name="radio" id="rd_f" value="rd_f" />
        Feminino </label></td>
    </tr>
    <tr>
      <td> Foto:</td>
      <td><label>
        <input type="file" name="foto" id="foto" />
      </label></td>
    </tr>
    <tr>
      <td><label>
        <input type="submit" name="cadastrar" id="cadastrar" value="Cadastrar" />
      </label></td>
      <td><label>
        <input type="reset" name="limpar" id="limpar" value="Limpar" />
      </label></td>
    </tr>
  </table>
</form>

    </body>
</html>

Abaixo temos o código para fazer a insersão no banco da página chamada inserirCliente.jsp:

<%-- 
    Document   : inserirCliente
    Created on : 12/05/2010, 20:05:25
    Author     : SIDNEY MELQUIADES
--%>

<%@page language="java" import="java.util.*" import="java.sql.*" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
	<%
	Connection conn = null;
	PreparedStatement pst = null;
	String foto =  request.getParameter("foto");
	//String result = foto.replace("\","_"");


try {
Class.forName("org.postgresql.Driver").newInstance();
conn = DriverManager.getConnection("jdbc:postgresql://localhost/banco","usuario","senha");
String SQL = "INSERT INTO cliente(nome,endereco,numero,bairro,cidade,rg,cpf,"+
"foneres,fonecom,email,foto) " +
"values (?,?,?,?,?,?,?,?,?,?,?)";
//out.println(SQL);
	pst = conn.prepareStatement(SQL);
        pst.setString(1,request.getParameter("nome"));
	pst.setString(2,request.getParameter("endereco"));
	pst.setString(3,request.getParameter("num"));
	pst.setString(4,request.getParameter("bairro"));
	pst.setString(5,request.getParameter("cidade"));
	pst.setString(6,request.getParameter("rg"));
	pst.setString(7,request.getParameter("cpf"));
	//pst.setString(8,request.getParameter("datanasc"));
	//pst.setString(9,request.getParameter("datacad"));
	pst.setString(8,request.getParameter("foneres"));
	pst.setString(9,request.getParameter("fonecom"));
	pst.setString(10,request.getParameter("email"));
	//"','"+request.getParameter("sexo")+
	pst.setString(11,request.getParameter("foto"));
        pst.executeUpdate();
	response.sendRedirect("Clientes.jsp");
} catch (Exception ex) {
    out.println("Problemas com a conexão!"+ex);
    	ex.printStackTrace();
} finally {
if (pst != null) pst.close();
if (conn != null) conn.close();
}

%>

<h2>Dados Inseridos com sucesso!</h2>

    </body>
</html>

e abaixo temos o código da página Cliente.jsp para exibir os dados no browser:

<%-- 
    Document   : Clientes
    Created on : 12/05/2010, 18:40:33
    Author     : SIDNEY MELQUIADES
--%>

<%@page language="java" import="java.sql.*" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
   <style type="text/css">
<!--
.style1 {
	color: #FF0000;
	font-size: 36px;
}
.style2 {color: #000099}
-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <div align="center"><span class="style1">Registro de Clientes no sistema</span>
  </div>
  <div>
  		<div align="center"><a href="CadCliente.jsp" class="style2">Cadastrar Cliente</a> </div>
  </div>
  <p>&nbsp;</p>
  <table width="1117" border="1" align="center">
    <tr>
      <td width="53">Código</td>
      <td width="207">Cliente</td>
      <td width="171">Endereço</td>
      <td width="52"></td>
      <td width="183">Bairro</td>
      <td width="163">Cidade</td>
      <td width="125">Telefone Comercial</td>
      <td width="125">Foto</td>
      <td width="52">Alterar</td>
      <td width="53">Excluir</td>
    </tr>

<%
	Connection conn = null;
    Statement st = null;
    ResultSet rs = null;
	try{
		Class.forName("org.postgresql.Driver").newInstance();
            conn = DriverManager.getConnection("jdbc:postgresql://localhost/banco",
            "usuario","senha");
            st = conn.createStatement();
            rs = st.executeQuery("select codigo,nome,endereco,numero,bairro,cidade,fonecom, foto from cliente");
            while(rs.next()) {
	%>

    <tr>
      <td height="67"><%= rs.getString("codigo") %></td>
        <td><%= rs.getString("nome") %></td>
        <td><%= rs.getString("endereco") %></td>
        <td><%= rs.getString("numero") %></td>
        <td><%= rs.getString("bairro") %></td>
        <td><%= rs.getString("cidade") %></td>
        <td><%=rs.getString("fonecom")%></td>
        <td><img src="<%=rs.getString("foto")%>" width="100" height="100" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>

  <%
  }
  	}catch(ClassNotFoundException erro){
		out.println("Problema com a Classe Driver JDBC " +erro);
	}catch(SQLException ex){
		out.println("Problema com o banco de dados" +ex);
	}
  %>
  </table>
</form>

    </body>
</html>

mais apesar de inserir corretamente continua não exibindo a imagem no browser:
O que ainda pode está errado?

C

Desculpa resucitar este topico, mas voce conseguiu exibir a imagem no jsp, pois eu consigo gravar uma string com o caminho do diretorio + nome da imagem, mas não estou conseguindo exibi-la no jsp. Faço através do , mas não da certo, alguem sabe como proceder?

Criado 8 de maio de 2010
Ultima resposta 3 de abr. de 2012
Respostas 10
Participantes 4