Como fazer um cadastro de produtos com upload de foto?

7 de setembro de 2010 21 respostas

wanderley_patricio 7 de setembro de 2010

Olá galera do GUJ!

Estou aki mais uma vez para pedir a ajuda dos companheiros,

O meu problema é o seguinte. estou desenvolvendo uma aplicação web em jsp e mysql para venda de produtos, e gostaria de saber se os amigos podem me ajudar a desenvolver essa aplicação, pois não tenho a minima idéia de como trabalhar com imagens. Gostaria que na hora de cadastrar fosse feito o upload da imagem para o banco de dados diretamente e gostaria de saber tbm como fazer para exibir essas imagens distribuidas em 5 linhas e 3 colunas de no máximo.

sou iniciante em desenvolvimento para web, gostaria de pedir que os amigos sejam pacientes comigo e possam exemplificar como tudo isso é feito.

agradeço desde já!

Att,

21 Respostas

Guevara 7 de set. de 2010

Olá Wanderley!
Baixe estas duas apostilas da Caelum, FJ-21 e FJ-28:

Td que vc precisa saber para esse form com upload está na FJ-21, mas na FJ-28 tb têm muita coisa legal.
Abraço!

wanderley_patricio 8 de set. de 2010

Caro Guevara,

agradeço a ajuda por passar o material pra poder estudar mais não estou tendo muito tempo pra poder aprender a usar as tecnologias citadas nos tutoriais( VRaport, Hibernate, Spring, Ajax), pois o site que estou desenvolvendo é com Dreamweaver , mysql e jsp simples e pura. gostaria de saber se tem como fazer isso com puro e simples jsp usando dreamweaver.

Guevara 8 de set. de 2010

Entendo, mas para usar com Java vc precisaria de classes e consequentemente de atributos, métodos, servlet e por ai vai. Talvez algum outro colega tenha alguma outra alternativa para vc.
Abraço!

wanderley_patricio 8 de set. de 2010

Olá novamente,

estou usando uma biblioteca chamada UploadBean e achei muito interessante pois realmente funciona. o problema é que o upload da imagem é feito em uma pasta que está dentro da minha aplicação. estava tentando fazer com que a imagem fosse salva no banco de dados mysql que contem um campo do tipo blob.
o código abaixo exemplifica o modo como estou tentando fazer:

<html>
<%@ page language="java" import="javazoom.upload.*,java.util.* , java.sql.*" %>
<%@ page errorPage="ExceptionHandler.jsp" %>

<jsp:useBean id="upBean" scope="page" class="javazoom.upload.UploadBean" >
  <jsp:setProperty name="upBean" property="folderstore" value="C:/Arquivos de programas/Apache Software Foundation/Tomcat 7.0/webapps/master/uploads" />
</jsp:useBean>

<head>
<title>Samples : Simple Upload</title>
<style TYPE="text/css">
<!--
.style1 {
	font-size: 12px;
	font-family: Verdana;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<ul class="style1">
<%
		UploadFile file = null;
      if (MultipartFormDataRequest.isMultipartFormData(request))
      {
         // Uses MultipartFormDataRequest to parse the HTTP request.
         MultipartFormDataRequest mrequest = new MultipartFormDataRequest(request);
         String todo = null;
         if (mrequest != null) todo = mrequest.getParameter("todo");
	     if ( (todo != null) && (todo.equalsIgnoreCase("upload")) )
	     {
                Hashtable files = mrequest.getFiles();
                if ( (files != null) && (!files.isEmpty()) )
                {
                    /*UploadFile*/ file = (UploadFile) files.get("uploadfile");
                    if (file != null) out.println("<li>Form field : uploadfile"+"<BR> Uploaded file : "+file.getFileName()+" ("+file.getFileSize()+" bytes)"+"<BR> Content Type : "+file.getContentType());
                    // Uses the bean now to store specified by jsp:setProperty at the top.
                    upBean.store(mrequest, "uploadfile");
					
					//fazendo a insersão no banco de dados
					
                }
                else
                {
                  out.println("<li>No uploaded files");
                }
	     }
         else out.println("<BR> todo="+todo);
      }
	  
	  				try{
					Class.forName("com.mysql.jdbc.Driver");
					Connection con = DriverManager.getConnection("jdbc:mysql://localhost/master","root","m2bm37vvc4");
					String sql = "insert into foto(comentario, foto)values('"+request.getParameter("todo")+
					"','"+file+"')";
					PreparedStatement st = con.prepareStatement(sql);
					st.executeUpdate(sql);
					}catch(Exception ex){
						out.println("Houve uma excessão ao inserir a imagem " + ex);
					}
%>
</ul>
<form method="post" action="SimpleUpload.jsp" name="upform" enctype="multipart/form-data">
  <table width="60%" border="0" cellspacing="1" cellpadding="1" align="center" class="style1">
    <tr>
      <td align="left"><b>Select a file to upload :</b></td>
    </tr>
    <tr>
      <td align="left">
        <input type="text" name="todo" size="100">
        <input type="file" name="uploadfile" size="50">
        </td>
    </tr>
    <tr>
      <td align="left">
		<input type="hidden" name="todo" value="upload">
        <input type="submit" name="Submit" value="Upload">
        <input type="reset" name="Reset" value="Cancel">
        </td>
    </tr>
  </table>
  <br>
  <br>
  <table border="0" cellspacing="1" cellpadding="0" align="center">
    <tr>
      <td bgcolor="#666666">
        <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center" class="style1">
          <tr>
            <td bgcolor="#FFFFFF"><b><font color="#0000FF">&nbsp;
              HTML tags used in this form : </font></b></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFFF">&nbsp;&lt;<b>form</b>
              <b>method</b>="<b><font color="#FF0000">post</font></b>"
              <b>action</b>="<b><font color="#FF0000">SimpleUpload.jsp</font></b>"
              name="upload" <b>enctype</b>="<b><font color="#FF0000">multipart/form-data</font></b>"&gt;</td>
          </tr>
          <tr>
            <td bgcolor="#FFFFFF">&nbsp;&lt;<b>input</b>
              <b>type</b>="<b><font color="#FF0000">file</font></b>"
              <b>name</b>="<font color="#FF0000"><b>uploadfile</b></font>"
              size="50"&gt;</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p align="center"><font size="-1" face="Courier New, Courier, mono">Copyright
    &copy; <a href="http://www.javazoom.net" target="_blank">JavaZOOM</a> 1999-2006</font></p>
</form>
</body>
</html>

Gostaria de saber o que é que preciso fazer para que a imagem e o comentário sejam inseridos no banco pois o campo comentario fica null;

att,

MarcioJAVA 8 de set. de 2010

Fala Wanderley

Seguinte, pra gravar no banco usa um ByteArrayOutputStream…

ByteArrayOutputStream baos = new ByteArrayOutputStream();
                            ObjectOutputStream oos = new ObjectOutputStream(baos);
                            oos.writeObject(j.getFoto());

                            stm.setBytes(5, baos.toByteArray());

isso aqui foi um trecho de um programa que fiz… foi projeto Desktop, não web, mas gravava a foto no banco.
vc vai literalmente serializar o objeto que tem a imagem no banco… no caso o

Outra dica… use o poder o PreparedStatement, com os caracteres coringa (pesquise sobre isso…

deve ficar mais ou menos assim…

String sql = "insert into foto(comentario, foto)values(?,?)";
PreparedStatement st = con.prepareStatement(sql);

sm.setString(1, request.getParameter("todo"));  
                       
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ObjectOutputStream oos = new ObjectOutputStream(baos);
oos.writeObject(file);

st.setBytes(2, baos.toByteArray());

st.executeUpdate(sql);

Grande Abraço

wanderley_patricio 8 de set. de 2010

MarcioJAVA:
Fala Wanderley
Seguinte, pra gravar no banco usa um ByteArrayOutputStream...
ByteArrayOutputStream baos = new ByteArrayOutputStream();
                            ObjectOutputStream oos = new ObjectOutputStream(baos);
                            oos.writeObject(j.getFoto());

                            stm.setBytes(5, baos.toByteArray());
isso aqui foi um trecho de um programa que fiz... foi projeto Desktop, não web, mas gravava a foto no banco.
vc vai literalmente serializar o objeto que tem a imagem no banco... no caso o

Outra dica... use o poder o PreparedStatement, com os caracteres coringa (pesquise sobre isso...

deve ficar mais ou menos assim..
String sql = "insert into foto(comentario, foto)values(?,?)";
PreparedStatement st = con.prepareStatement(sql);

sm.setString(1, request.getParameter("todo"));  
                       
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ObjectOutputStream oos = new ObjectOutputStream(baos);
oos.writeObject(file);

st.setBytes(2, baos.toByteArray());

st.executeUpdate(sql);
Grande Abraço

Olá Marcio, primeiramente quero agradecer por se prontificar a ajudar. tentei fazer o codigo no qual vc havia orientado a fazer, ele ficou assim:

<%
try{
	ByteArrayOutputStream baos = new ByteArrayOutputStream();   
	ObjectOutputStream oos = new ObjectOutputStream(baos);   
	oos.writeObject("uploadfile");   
	Class.forName("com.mysql.jdbc.Driver");
	Connection con = DriverManager.getConnection("jdbc:mysql://localhost/master","root","m2bm37vvc4");
	String sql = "insert into foto(comentario, foto)values(?,?)";
	PreparedStatement st = con.prepareStatement(sql);
	st.setString(1, request.getParameter("todo"));
	st.setBytes(2, baos.toByteArray());
	st.executeUpdate();
	}catch(Exception ex){
		out.println("Houve uma excessão ao inserir no banco" + ex);
	}
%>
<h2>Foto inserida com sucesso no banco de dados!</h2>

mais na hora de inserir os dados gera uma excessão: Houve uma excessÃ£o ao inserir no bancocom.mysql.jdbc.exceptions.MySQLIntegrityConstraintViolationException: Column 'comentario' cannot be null .

como posso corrigir isso?

Vmaia 8 de set. de 2010

Olá, de uma verificada se o parametro “todo” está realamente trazendo algo.

Parece que ele está vindo vazio.

Chumba no código um valor qualquer para o comentario.

wanderley_patricio 8 de set. de 2010

seguindo a sugestão do Vmaia acabei descobrindo que o request.getParamenter(“todo”) está trazendo null como vcs podem observar:

com.mysql.jdbc.ServerPreparedStatement[1] - insert into foto(comentario, foto)values(null,_binary’¬í\0t\0\nuploadfile’)

não sei o que pode está acontecendo. alguém pode dá outra dica.

Vmaia 8 de set. de 2010

Na pagina que vc coloca o comentario, qual o nome do atributo ?
Vai ver o “textArea” está com outro nome.

wanderley_patricio 8 de set. de 2010

Vmaia:
Na pagina que vc coloca o comentario, qual o nome do atributo ? Vai ver o "textArea" está com outro nome.

aki está o form

<body>

		<form method="post" action="gravaFoto.jsp" name="upform" enctype="multipart/form-data">   
  <table width="60%" border="0" cellspacing="1" cellpadding="1" align="center" class="style1">   
    <tr>   
      <td align="left"><b>Select a file to upload :</b></td>   
    </tr>   
    <tr>   
      <td align="left">   
        <input type="text" name="comentario" size="100">   
        <input type="file" name="uploadfile" size="50">        </td>   
    </tr>   
    <tr>   
      <td align="left">   
     
        <input type="submit" name="Submit" value="Upload">
        <input type="reset" name="Reset" value="Cancel" /></td>   
    </tr>   
  </table>  
	</form>
</body>

Vmaia 8 de set. de 2010

Opa! Tente....... usar isso

st.setString(1, request.getParameter("comentario"));

no lugar

st.setString(1, request.getParameter("todo"));

wanderley_patricio 8 de set. de 2010

a alteração ja havia sido feita mas mesmo assim dava erro no insert com comentario com valor null. abaixo está o código:

<%
try{
	
	Class.forName("com.mysql.jdbc.Driver");
	Connection con = DriverManager.getConnection("jdbc:mysql://localhost/master","root","m2bm37vvc4");
	String sql = "insert into foto(comentario, foto)values(?,?)";
	PreparedStatement st = con.prepareStatement(sql);
	st.setString(1, request.getParameter("comentario"));
	ByteArrayOutputStream baos = new ByteArrayOutputStream();   
	ObjectOutputStream oos = new ObjectOutputStream(baos);   
	oos.writeObject("uploadfile");   
	st.setBytes(2, baos.toByteArray());
	out.println(st);
	//st.executeUpdate();
	}catch(Exception ex){
		out.println("Houve uma excessão ao inserir no banco" + ex);
	}
%>
<h2>Foto inserida com sucesso no banco de dados!</h2>

Vmaia 8 de set. de 2010

Opa!

Ao inves de usar o request.getParameter(“comentario”) tente usar o request.getAttribute(“comentario”).

Pois está tentando acessar um atributo do form.

wanderley_patricio 8 de set. de 2010

Vmaia:
Opa!

Ao inves de usar o request.getParameter(“comentario”) tente usar o request.getAttribute(“comentario”).

Pois está tentando acessar um atributo do form.

vou ver se dá certu. valeu

Vmaia 8 de set. de 2010

wanderley patricio:
Vmaia:
Opa!

Ao inves de usar o request.getParameter(“comentario”) tente usar o request.getAttribute(“comentario”).

Pois está tentando acessar um atributo do form.

não entendi a colocação do amigo, pois o request que vc pediu para passar é o mesmo que ja está definido.

O metodo é diferente…

request.get[b]Parameter/b tente usar o request.get[b]Attribute/b

wanderley_patricio 8 de set. de 2010

wanderley patricio:
Vmaia:
Opa!

Ao inves de usar o request.getParameter(“comentario”) tente usar o request.getAttribute(“comentario”).

Pois está tentando acessar um atributo do form.

vou ver se dá certu. valeu

continua a mesma coisa.

wanderley_patricio 8 de set. de 2010

Depois de ter quebrado muito a cabeça, acredito ter encontrado a solução. abaixo segue o codigo que desenvolvi para poder gravar texto junto com imagem no banco.

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*, java.io.*" errorPage="" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
	<%
	try{
		
		Class.forName("com.mysql.jdbc.Driver");
		Connection con = DriverManager.getConnection("jdbc:mysql://localhost/master","root","senha");
		String sql = "insert into produtos(codigo_barra_produto, descricao_do_produto,fornecedor, valor_unitario,"+
		"quatidade_inicial, quantidade_atual, quantidade_minima)"+
"values('"+request.getParameter("codigoField")+
"','"+request.getParameter("produtoField")+
"','"+request.getParameter("fornecedorComboBox")+
"','"+request.getParameter("valorField")+
"','"+request.getParameter("qtdeInicialField")+
"','"+request.getParameter("qtdeInicialField")+
"','"+request.getParameter("qtdeMinimaField")+
//"','"+request.getParameter("dataCadField")+
"')";
		PreparedStatement smt = con.prepareStatement(sql);
		smt.executeUpdate();
		
		}catch(ClassNotFoundException erroClasse){
			out.println("Erro na Classe de Conexão!" + erroClasse);
		}catch(SQLException erroSQL){
			out.println("Erro ao inserir dados no banco! " + erroSQL);
		}
	%>
    
     <%
try{
	
	Class.forName("com.mysql.jdbc.Driver");
	Connection con2 = DriverManager.getConnection("jdbc:mysql://localhost/master","root","senha");
	String sql2 = "update produtos set foto = ? where codigo_barra_produto = '"+request.getParameter("codigoField")+"'";
	PreparedStatement st2 = con2.prepareStatement(sql2);
	//st.setString(1, request.getAttribute("comentario"));
	ByteArrayOutputStream baos = new ByteArrayOutputStream();   
	ObjectOutputStream oos = new ObjectOutputStream(baos);   
	oos.writeObject("uploadfile");   
	st2.setBytes(1, baos.toByteArray());
	//out.println(st);
	st2.executeUpdate();
	}catch(Exception ex){
		out.println("Houve uma excessão ao inserir no banco" + ex);
	}
%>

</body>
</html>

agora falta saber como faço para ver a imagem que foi inserida no banco em um página jsp?

wanderley_patricio 8 de set. de 2010

olá novamente galera estou tentando agora fazer com que as imagens sejam exibidas na página jsp da seguinte forma:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*, java.io.*" errorPage="" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
	color: #FF0000;
	font-weight: bold;
	font-size: 36px;
}
-->
</style>
</head>

<body>
<div align="center"><span class="style1">Lista de Produtos</span></div>
<p>
  <%
		try{
		
		Class.forName("com.mysql.jdbc.Driver");
		Connection con = DriverManager.getConnection("jdbc:mysql://localhost/master","root","senha");
		String sql = "select descricao_do_produto, foto from produtos";
		PreparedStatement smt = con.prepareStatement(sql);
		ResultSet rs = smt.executeQuery();
		while(rs.next()){

%>
		
</p>
<form id="form1" name="form1" method="post" action="listarProdutos.jsp">
  <table width="200" border="1">
    <tr>
      <td>produto</td>
      <td>Imagem</td>
    </tr>
    <tr>
      <td><%=rs.getString("descricao_do_produto")%></td>
      <td><%=rs.getBytes("foto")%></td>
    </tr>
  </table>
  <%
	}
		
		
		}catch(ClassNotFoundException erroClasse){
			out.println("Erro na Classe de Conexão!" + erroClasse);
		}catch(SQLException erroSQL){
			out.println("Erro ao listar dados do banco! " + erroSQL);
		}
		%>
</form>
<p>&nbsp;</p>
</body>
</html>

O problema é que a imagem está sendo exibida na forma de código como é armazenada no banco. Qual tratamento é necessário para fazer a imagem exibir de forma correta?

quero agradecer a todos que estão ajudando. muito brigadoooo!! :)

MarcioJAVA 9 de set. de 2010

Cara mais uma coisa, na foto vai dar erro… vc tá tentando gravar uma String. Ele vai gravar… mas não a foto.

vc vai ter que fazer o seguinte:
Suponhamos que vc armazenava a foto num objeto Image, com nome img:

Image img;

quando for armazenar, use o lance do ByteArrayOutputStram e DataOutputStram e writeObject
quando for ler use o ByteArrayInputStram e DatainputStram e readObject

esse readObject recebo o getBytes, e monta um objeto
faça un casting para o Image…

mais ou menos assim:

ByteArrayInputStream bais = new ByteArrayInputStream();
DataInputStream dis = new DataInputStream(bais);
Object o = dis.readObject(rs.getBytes());
img = (Image) o;

wanderley_patricio 10 de set. de 2010

MarcioJAVA:
Cara mais uma coisa, na foto vai dar erro... vc tá tentando gravar uma String. Ele vai gravar.... mas não a foto.
vc vai ter que fazer o seguinte:
Suponhamos que vc armazenava a foto num objeto Image, com nome img:
Image img;
quando for armazenar, use o lance do ByteArrayOutputStram e DataOutputStram e writeObject
quando for ler use o ByteArrayInputStram e DatainputStram e readObject

esse readObject recebo o getBytes, e monta um objeto
faça un casting para o Image...
mais ou menos assim:
ByteArrayInputStream bais = new ByteArrayInputStream();
DataInputStream dis = new DataInputStream(bais);
Object o = dis.readObject(rs.getBytes());
img = (Image) o;

Deixa eu ver se entendi Marcio. vc que dizer que a forma como estou armazenando a imagem de forma incorreta?
No caso teria que ficar dessa forma:

#      <%  
# try{  
#       
#     Class.forName("com.mysql.jdbc.Driver");  
#     Connection con2 = DriverManager.getConnection("jdbc:mysql://localhost/master","root","senha");  
#     String sql2 = "update produtos set foto = ? where codigo_barra_produto = '"+request.getParameter("codigoField")+"'";  
#     PreparedStatement st2 = con2.prepareStatement(sql2);  
#     //st.setString(1, request.getAttribute("comentario"));  
#     ByteArrayOutputStream baos = new ByteArrayOutputStream();     
#     DataOutputStream oos = new DataOutputStream(baos);     
#     oos.writeObject("uploadfile");     
#     st2.setBytes(1, baos.toByteArray());  
#     //out.println(st);  
#     st2.executeUpdate();  
#     }catch(Exception ex){  
#         out.println("Houve uma excessão ao inserir no banco" + ex);  
#     }  
# %>

e para fazer o retorno da imagem uso esse codigo:

ByteArrayInputStream bais = new ByteArrayInputStream();
DataInputStream dis = new DataInputStream(bais);
Object o = dis.readObject(rs.getBytes());
img = (Image) o;

e para fazer com que a imagem seja exibida na como é que especifico?
seria dessa forma?
<%=rs.getBytes(img)%>

agradeço a atenção!

AbelBueno 10 de set. de 2010

para seu jsp exibir uma imagem armazenada no banco você precisa entender como o html exibe imagens…

no seu html você coloca o endereço de uma imagem no servidor…

o browser lê a tag de imagem e faz uma nova requisição para o servidor para retornar apenas a imagem daquele endereço…

com isso você tem duas alternativas:

grava a imagem num arquivo temporário e coloca o link apontando para este arquivo. (esta é a solução PORCA)
crie um servlet “especialista” que retornará só a imagem… procure aqui no guj que tem exemplos de como fazer isso…

Criado 7 de setembro de 2010

Ultima resposta 10 de set. de 2010

Respostas 21

Participantes 5

21 Respostas

Topicos relacionados