✅ HTML5 - Upload de arquivos

Índice

Quando temos formulários de coleta de dados em uma página HTML5 Além de poder pegar dados com campos do tipo input, também podemos fazer upload de arquivos, com isso podemos agilizar o carregamento de certos dados que são impossíveis de expressar em texto ou que podem ser textos muito longos, é comum fazer upload de imagem arquivos ou arquivos PDF, uma vez que esses dois formatos são muito populares, porém com Ajax podemos fazer upload de quase qualquer tipo de arquivo.
Fazer upload de arquivos
Para fazer upload de arquivos usando Ajax, devemos criar um campo de tipo de arquivo em um formulário e em nossa rotina Ajax usar um objeto FormData com o qual coletaremos os dados para poder dar-lhes o formato necessário e fazer o upload do nosso arquivo para o servidor.
O objeto FormData ele deve ser usado com cuidado, pois ainda pode haver versões de navegadores que não o suportam totalmente, no entanto, é uma solução bastante sólida.
Vamos ver no código a seguir como fazer um upload de arquivo básico:

 ExemploBananas:Maçãs:Cerejas:Arquivo:Total:0 itensEnviar formulário

Ao incorporar a entrada do tipo de arquivo, o objeto FormData faz automaticamente os arranjos para que nosso arquivo possa ser carregado para o servidor, na imagem a seguir podemos ver como o navegador interpreta isso:

Neste caso era uma imagem bastante clara então o tempo de upload do arquivo para o servidor não é perceptível, porém se fosse um pdf de 30 MB o tempo seria muito mais longo, pois é transparente para o usuário, ele pode pensar que a página não é "fazer nada" ou era "pensar" para evitar isso podemos incorporar uma barra de progresso com a qual o progresso se torna visível.
Para ver o andamento da escalada vamos usar o objeto XMLHttpRequest para verificar o status da solicitação Ajax:

 ExemploBananas:Maçãs:Cerejas:Arquivo:Progresso:Total:0 itensEnviar formulário

Nós definimos um elemento progresso e com ele Objeto XMLHttpRequest Podemos atribuir os valores enquanto o upload avança, no navegador podemos ver da seguinte maneira:

PROLONGAR

Podemos usar Ajax Para muito mais do que consultar elementos em outras páginas, também podemos usá-lo para melhorar nossos formulários na hora de capturar dados.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo