Upload com barra de progresso

No meu primeiro artigo vamos ver um exemplo extremamente simples de como construir um upload com barra de progresso.

Por Programação Pular para comentários
Upload com barra de progresso
Introdução
No meu primeiro artigo vamos ver um exemplo extremamente simples de como construir um upload com barra de progresso. Procurei muito na internet sobre esse assunto e encontrei muitos tutoriais difíceis e que exigiriam horas de programação, e convenhamos não é isso que queremos. Neste artigo vamos fazer isso de forma simples e rápida. Utilizaremos o componente NeatUpload, grátis e disponível para download no http://www.brettle.com/neatupload, pode ser usado com o Framework e Mono, com ele o usuário poderá monitorar o andamento do upload, obtendo informações do andamento do upload (Porcentagem), taxa de transferência, total enviado, tempo de envio, tempo para finalizar envio e opção de cancelar o upload.

Instalação
1º Baixe o componente NeatUpload na página http://www.brettle.com/neatupload, e pegue a versão mais atual, que hoje é NeatUpload-1.2.24.zip , descompacte o arquivo.

2º Na Toolbox do Visual Studio crie uma nova Tab, depois vá em Choose Itens e instale a DLL: Brettle.Web.NeatUpload.dll, que estará na pasta Bin do arquivo descompactado conforme a Figura 01.



Upload com barra de progresso
Figura 01. Instalando DLL.

3º Vá ao Web.Config e na seção , deixe como a Listagem 01




Listagem 01. Código Web.Config.

Iniciando o exemplo
Na página que fará o upload adicione os controles InputFile, ProgressBar e um Button, no arquivo descompactado copie a pasta NeatUpload e cole na pasta raiz de seu projeto. Note que na propriedades do componente ProgressBar tem a opção Inline, com ela você escolhe se a barra de progresso será em uma popup ou na própria página, fica a seu encargo escolher.

Agora sim está quase tudo pronto! Você já pode rodar a página para testar para ver como está ficando.

Upload com barra de progresso
Figura 02. Testando Upload.

Falta apenas configurarmos onde o arquivo será salvo, na opção OnClick do Button adicionado adicione o seguinte código:

if (InputFile1.HasFile)//Verifica se tem arquivo para upload
{
    InputFile1.TmpFile.CopyTo(Server.MapPath(InputFile1.FileName.ToString()));
    //Esse componente envia o arquivo para uma pasta temporaria e de la nos
    // copiamos para onde nós queremos
    InputFile1.TmpFile.Delete();//Deletando arquivo temporário.
}

Listagem 02. Código de upload.

Finalizando
Seu upload está pronto! Mas você achou feio aquele visual? Sem problemas! Lembra da pasta NeatUpload que nós copiamos? Lá tem uma página Progress.aspx que você pode customizar, na mesma pasta tem as imagens que você pode trocar, é só usar a imaginação. Veja um exemplo na Figura 03.

Upload com barra de progresso
Figura 03. Barra de upload customizada.

Considerações finais
Você pode ter problemas com o tamanho de arquivo enviado para resolver isso vá ao Web.Config e dentro do adicione a seguinte linha:


Listagem 04. Resolvendo problemas de upload.

Você pode também evitar que fique dando refresh na página e usar Ajax, mas isso pode ficar para outro artigo.

Autor:GABRIEL DOS SANTOS POTUMATI


========================================
Conheça nosso parceiro e fonte desta matéria:

Upload com barra de progresso      

Compartilhe com seus amigos:
Quer conversar com o(a) Redação, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.