Aprenda como fazer Upload de imagens usando AJAX e PHP sem Refresh na Página

Upload de imagem usando AJAX e PHPHoje vou demonstrar como fazer Upload de imagens usando AJAX e PHP, esse processamento vai ocorrer sem dar refresh na página.

Nesse post vamos usar uma feature que veio no pacote de aprimoramentos do HTML5, a nova API XMLHttpRequest nível 2 (XHR2) .

Como exemplo vamos construir uma página para cadastrar e editar times de futebol, com nome e o escudo (imagem).

Para exibir todos os times cadastrados e seus escudos, vamos construir uma página para listagem,  no final do post disponibilizo o link para download do código.

 

Post relacionado:  Detalhando upload em PHP com detalhes e passo a passo

Conhecendo API FormData()

Importante citar, o XHR2 (XMLHttpRequest nível 2) não é HTML5 porém ele foi implementado em conjunto com outras melhorias dessa nova versão do HTML nos navegadores.

O XHR2 trouxe a API FormData() que prove uma maneira de construir conjuntos de chaves/valores para serem enviados usando XMLHttpRequest. 

Essa API envia os dados de maneira idêntica ao submit() com dados codificado em “multipart/form-data“, com isso é possível fazer upload de imagens usando requisições AJAX.

Para usar basicamente temos que instanciar um objeto FormData() e opcionalmente podemos passar um parâmetro que seria o formulário HTML:

Também existem métodos para atribuir valores ao objeto FormData():

Existem mais métodos e eventos para o objeto FormData(), visite a documentação W3C para conhecer.

 

Construindo Upload de imagens usando AJAX e PHP

Construindo Upload de Imagens usando AJAXComo citei acima vamos ter apenas 3 páginas HTML (Consulta, Inclusão e Edição), pois o objetivo é demonstrar upload de imagens usando AJAX.

Para deixar o design das páginas mais agradável vamos baixar o framework Materialize que traz classes prontas para estilização.

As instruções PHP para INSERT, UPDATE e UPLOAD ficam centralizadas no script “action.php“.

 

Script do Banco de Dados

Nesse exemplo teremos um banco de dados “blog” com apenas uma tabela nomeada como “times”, com três campos (id, nome, escudo).

 

Script JavaScript

No arquivo “custom.js” temos a mágica do upload de imagens usando AJAX!

É nesse script que instanciamos o objeto “FormData” e passamos como parâmetro o formulário com todos os inputs, inclusive a imagem.

O script “custom.js” possui as instruções para envio da requisição AJAX, por isso ele é chamado antes de fechar a tag </body> nos scripts “cadastro.php” e “editar.php“.

custom.js

 

Script PHP de Conexão 

Abaixo o script de conexão com o banco de dados sempre usando a extensão PDO.

Para conhecer mais sobre PDO assista aos vídeos Curso sobre PHP com PDO.

conexao.php

Post relacionado:  Aprenda como validar dados com PHP

Página de Inclusão

Nessa página temos apenas o código HTML sendo estilizado com Materialize.

cadastrar.php

 

Página de Edição

Na página de edição fazemos uma consulta pelo id do time passado como parâmetro, carregamos os dados no formulário e exibimos a imagem na tag <img>.

editar.php

 

Página de Consulta

Abaixo temos uma página simples para listagem dos times cadastrados e também seus respectivos escudos.

index.php

 

Script PHP para Gravação

Nesse script centralizamos todas a funções PHP, no topo chamamos o script ‘conexao.php‘ para instanciar nosso objeto PDO.

Recebemos os dados via POST, observem que no PHP não muda em nada a forma como são recebidos os campos via AJAX, continuamos trabalhando com $_FILES[] para processar a imagem.

As mensagens de Erro ou Sucesso são retornadas sempre no formato JSON, pois na requisição AJAX foi setado o “DataType: ‘JSON'”.

Leia o post Detalhando Upload em PHP para conhecer mais.

action.php

 

Resultado Final

Listagem de Times Vazia:

Listagem Vazia

 

Listagem com Times Cadastrados:

Listagem Completa

 

Página para Inclusão de Times, depois de preencher o nome e selecionar a imagem é só clicar em “GRAVAR”, será exibida a mensagem de Sucesso no Topo:

Cadastrar Time

Página para Edição de Times, depois de preencher o nome ou selecionar a imagem é só clicar em “GRAVAR”, será exibida a mensagem de Sucesso no Topo:

Editar Time

 

O objetivo desse post foi demonstrar como construir um formulário para efetuar upload de imagens usando AJAX e PHP, ligado a um banco de dados no MySQL.

Espero que tenham gostado, até próxima …

Link para download do código Upload usando AJAX (1316 downloads)

Se você gostou compartilhe esse post nas redes sociais, ajude o blog DevWilliam a crescer!

Show Buttons
Hide Buttons