lunes, 22 de junio de 2015

Java Web MVC - Sesión 01.01: Cargando un archivo

Si vieron el vídeo y post anterior, habrán visto que propongo cargar la foto del usuario que se está registrando.. pero no aparece en el tutorial. Y si no lo han visto, ahora ya lo saben.

Pues bien, este post es un anexo a la sesión anterior sobre Java Web MVC.



El campo en la entidad

Para comenzar, debemos agregar el campo byte[] foto en la entidad, de tal manera que pueda permitir los bytes de la foto. Pero como se va a guardar en la tabla, le indicamos la anotación @javax.persistence.Lob para que el JPA haga lo suyo convirtiéndolo como bloque en la tabla.

    @Lob
    private byte[] foto;

    public byte[] getFoto() {
        return foto;
    }

    public void setFoto(byte[] foto) {
        this.foto = foto;
    }

Código fuente completo: Alumno.java

El servlet que lo cargará

Ahora, cuando recibamos el archivo cargado, necesitamos preparar el Servlet que recibe los datos de tal manera que permita carga de archivos. Para ello debemos, primero, agregar la notación @javax.servlet.annotation.MultipartConfig antes de la declaración del servlet.

 Luego, debemos leer el parámetro del formulario y guardarlo como arreglo de bytes:


            Part fotoPart = request.getPart("foto");
            int fotoSize=(int)fotoPart.getSize(); //si no tiene tamaño, no hay foto
            
            byte[] foto=null; //el buffer
            if(fotoSize>0){
                foto=new byte[fotoSize];
                try(DataInputStream dis=new DataInputStream(fotoPart.getInputStream())){
                    dis.readFully(foto);
                    
                }
            }

Y, solo si tiene dato, lo guardamos en la entidad.


            if (fotoSize>0)
                alumno.setFoto(foto);

El archivo completo: RegistroAlumnoServlet.java

El servlet que lo mostrará

Una imagen, a diferencia de un dato de tipo String o Date, no puede ser mostrada en un JSP como un simple "print". Una imagen, en Web, es un recurso más como un HTML o CSS, por ello, debemos crear el recurso que lo mostrará. Así que, haremos un servlet que cuando se le indique el ID del registro que debería tener la foto, busque en la base de datos el ID, tome el arreglo de bytes que representa a la foto, y le decimos al servlet que lo imprima tal cual.

Es un simple vaciado de bytes al response, que es el encargado de mostrar los resultados en http.

El JSP que lo muestra

Como estamos usando el mismo formulario para ingresar los datos y mostrar los datos registrados, haremos lo mismo para ingresar la foto usando el <input type="file" /> y un poco más abajo para mostrar el contenido de la imagen:
                
<div class="form-group">
  <label for="foto">Foto</label>
  <input type="file" name="foto" id="foto"/><br/>
  <c:if test="${alumno.foto ne null}">
      <img src="<%=request.getContextPath()%>/MostrarFotoServlet?id=${alumno.id}" style="width: 100px;"/>
  </c:if>
</div>


El archivo completo: alumno_form.jsp

El vídeo

Si no te gusta leer, aquí tienes el vídeo donde se muestra cómo cargar la imagen.


El código fuente

El código fuente del proyecto completo incluyendo la carga del archivo, la puedes descargar desde aquí


No hay comentarios.:

Publicar un comentario

Si quieres hacer una pregunta más específica, hazla en los foros que tenemos habilitados en Google Groups


Ah! solo se permiten comentarios de usuarios registrados. Si tienes OpenID, bienvenido! Puedes obtener su OpenID, aquí: http://openid.net/