Sistema para upload de imagens

Neste tutorial vou mostrar de forma bem resumida como subir imagens para o servidor web, será bem simples.
Mas para quem esta iniciando na programação web, vai ser um bom exemplo de como as coisas funcionam.

Upload de arquivos

O projeto vai ter os seguintes arquivos:
index.php // Arquivo com form e os campos INPUT para enviar os arquivos.
upload.php // Arquivo com as funções em PHP para receber os dados do INDEX.
img // Diretório (pasta) para onde os arquivos irão ficar depois do upload, poderia ser qualquer nome.
– Servidor local instalado, neste tutorial estou usando o WAMP, mas pode ser qualquer um.

Fiz esse projeto com a IDE PhpStorm, mas você pode criar em qualquer editor, de sua preferência.

1 – Dentro da pasta www/ do WAMP crie um diretório com o nome up. Será o nome do projeto deste tutorial.

2 – Vamos criar o arquivo index.php, com o seguinte código.

Bem simples esse FORM, mas você pode melhorar ao seu gosto, acrescentando um CSS ou bootstrap.

3 – Vamos criar o arquivo upload.php como seguinte código.

O código esta bem comentado fácil de entender a lógica do sistema.

Pronto agora vamos fazer um teste no navegador para ver se tudo vai ocorrer bem.

Abra seu navegador e acesse o projeto que acabou de criar.

Acessando o projeto no navegador

Depois que selecionar a imagem, clique em enviar.
Imagem selecionada

Se tudo ocorreu bem, vai aparecer a mensagem de sucesso.
Mensagem de sucesso com o upload

Para testar acesse a pasta img do projeto e veja se a imagem esta lá, clique no link para ver a imagem no navegador.

Pronto tudo certo!

Espero que este simples exemplo possa lhe trazer um entendimento de como funciona o upload de arquivos, falta melhorar no visual, adicionar filtros de segurança, nesse exemplo tem uma camada de segurança que só aceita arquivos tipo imagem com extensões definidas no código (jpg, jpeg, png, gif) e limite de tamanho, isso adiciona uma segurança ao sistema. Blz!

Obrigado pela visita!
Compartilhe esse tutorial com amigos que estão aprendendo também.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *