Como fazer um cadastro de produtos com upload de foto?

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,

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!

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.

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!

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>=&quot;<b><font color="#FF0000">post</font></b>&quot;
              <b>action</b>=&quot;<b><font color="#FF0000">SimpleUpload.jsp</font></b>&quot;
              name=&quot;upload&quot; <b>enctype</b>=&quot;<b><font color="#FF0000">multipart/form-data</font></b>&quot;&gt;</td>
          </tr>
          <tr>
            <td bgcolor="#FFFFFF">&nbsp;&lt;<b>input</b>
              <b>type</b>=&quot;<b><font color="#FF0000">file</font></b>&quot;
              <b>name</b>=&quot;<font color="#FF0000"><b>uploadfile</b></font>&quot;
              size=&quot;50&quot;&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,

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

[quote=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[/quote]

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

[code]<%
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);
}
%>

Foto inserida com sucesso no banco de dados!

[/code]

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?

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.

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.

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

[quote=Vmaia]Na pagina que vc coloca o comentario, qual o nome do atributo ?
Vai ver o “textArea” está com outro nome.[/quote]

aki está o form

[code]

	<form method="post" action="gravaFoto.jsp" name="upform" enctype="multipart/form-data">   
Select a file to upload :
    <input type="submit" name="Submit" value="Upload">
    <input type="reset" name="Reset" value="Cancel" /></td>   
</tr>   
[/code]

Opa!
Tente… usar isso

st.setString(1, request.getParameter("comentario"));[/code]no lugar[code]st.setString(1, request.getParameter("todo"));  

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

[code]<%
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);
}

%>

Foto inserida com sucesso no banco de dados!

[/code]

Opa!

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

Pois está tentando acessar um atributo do form.

[quote=Vmaia]Opa!

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

Pois está tentando acessar um atributo do form.[/quote]

vou ver se dá certu. valeu

[quote=wanderley patricio][quote=Vmaia]Opa!

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

Pois está tentando acessar um atributo do form.[/quote]

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

O metodo é diferente…

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

[quote=wanderley patricio][quote=Vmaia]Opa!

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

Pois está tentando acessar um atributo do form.[/quote]

vou ver se dá certu. valeu[/quote]

continua a mesma coisa.

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.

[code]<%@ page contentType=“text/html; charset=utf-8” language=“java” import=“java.sql., java.io.” errorPage="" %>

Untitled Document <% 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);
}

%>

[/code]

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

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

[code]<%@ page contentType=“text/html; charset=utf-8” language=“java” import=“java.sql., java.io.” errorPage="" %>

Untitled Document
Lista de Produtos

<% 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()){

%>

produto Imagem
<%=rs.getString("descricao_do_produto")%> <%=rs.getBytes("foto")%>
<% }
	}catch(ClassNotFoundException erroClasse){
		out.println("Erro na Classe de Conexão!" + erroClasse);
	}catch(SQLException erroSQL){
		out.println("Erro ao listar dados do banco! " + erroSQL);
	}
	%>

 

[/code]

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!! :slight_smile:

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;