Olá desenvolvedores, neste tutorial aprenderemos a implementar o carregamento de uma imagem na tela fazendo o upload. Este é um recurso muito utilizado em vários tipos de sistema. No entanto, ao contrário do que parece, este tipo de implementação não precisa ser complexo, então, este também será um desafio, a busca pela simplicidade.

Assim, na página principal, index.jsp, página que a partir da qual acessamos as “funcionalidades” do nosso sistema, crie o link para a página upload.jsp.

O próximo passo é criar dentro da subpasta pages a página JSP, upload.jsp. Na página de upload declare o jQuery, visto que iremos utilizá-lo para esta implementação.

Você poderá obter a declaração correta, acessando aqui, na página oficial do jQuery. Ou poderá copiar da imagem abaixo, e então colar/copiar a declaração para dentro do escopo da tag head da página.

É preciso também criar, dentro da tag body um campo para que, a partir dele, o upload possa ser feito. Este campo será um input, do tipo file. E é este campo que, quando clicado, chamará a função javascript uploadFile() que interpretará se houve ou não uma mudança no evento e carregará a imagem.

O segundo elemento dessa página será o local onde a imagem irá aparecer, então com a tag img crie este espaço.    

FUNÇÃO DE UPLOAD

A função Javascript criada fora da tag bory começa com uma variável recebendo a referência da imagem na DOM – Document Object Model (Modelo de Documento por Objetos), que grosso modo é a árvore de elementos HTML. Criaremos também uma segunda variável que igualmente receberá a referência do input de arquivos de imagem na DOM. A imagem que subirá para o upload é em base64.

Como já visto no tutorial “UPLOAD DE IMAGENS EM BASE64 | PARTE 2”, base64 é um tipo de codificação de dados para transferência na internet. Desse modo é possível transmitir dados binários, por meio de transmissões que lidam apenas com textos, como enviar arquivos anexados em uma submissão de formulário.

A terceira variável, receberá o reader que tem a função de ler o arquivo. Ao adicionar uma imagem trabalharemos com o arquivo reader chamando o evento onload, que somente é chamado quando um objeto é carregado.

var reader = new FileReader();

A variável reader invocando o evento onloadend receberá a função que mostrará a imagem. A imagem que virá do arquivo lido, será adicionada por meio do target ao atributo src (source) cujo valor indica o caminho da imagem para que ela possa ser exibida.

VERIFICANDO O ESTADO DO EVENTO

O evento onload é comumente utilizado para a execução de scripts imediatamente após o completo carregamento da página. E por isso se torna necessário uma verificação. Desse modo, se já existe um arquivo, iremos pegar o arquivo lido por meio do reader e transformá-lo em algo que o servidor entenda e como parâmetro, passaremos o arquivo.

ADENDO: A linha de código abaixo deverá ser colocada depois que implementarmos todos os parâmetros da função. Mas atente-se, ela ainda permanecerá dentro do if, porém, depois que o upload for realizado.

Mas se não existe arquivo, nenhum caminho de arquivo precisará ser informado, logo, o target que invoca o src permanecerá vazio.

O evento é disparado sempre que uma nova imagem é adicionada. Desse modo, se a imagem estiver correta, utilizaremos uma função Ajax para fazer o upload, enviá-lo para servidor e proceder com as devidas manipulações.

Esta função trás o método de envio para o servidor, a url que chamará a servlet, e os dados que recebe como argumento a variável que irá carregar a imagem. Assim, se a imagem for carregada com sucesso (done) um alerta de sucesso será enviado. Mas se der algum tipo de erro (fail), então uma resposta de erro será emitida.

IMPORTANTE: Embora o trecho de código acima seja executado por último, ele deverá ser adicionado logo após a função responsável por exibir a imagem.

EM POUCAS PALAVRAS

Aqui foi dado o primeiro passo para o upload e exibição da imagem no sistema. Neste tutorial a implementação se concentrou no lado do cliente utilizando uma função Javascript e Ajax. No próximo tutorial criaremos a servlet e trabalharemos com a conversão da imagem em base64. Eu fico por aqui, nos vemos no próximo tutorial.