Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

HTML5 File API | Aula 4 de 6 – Monitorando o progresso da leitura de cada arquivo | Série HTML5 | SW9

HTML5 File API | Aula 4 de 6 – Monitorando o progresso da leitura de cada arquivo | Série HTML5 | SW9

Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br).

Dando continuidade a MEGA Série sobre HTML5, estamos falando sobre a File API.

#O que vimos na aula passada?

Na terceira AULA, foi explicado como realizar a leitura de arquivos locais e renderizar uma amostra no navegador. Como estamos trabalhando com uma galeria de imagens, fizemos a leitura de arquivos do tipo imagem e exibimos um thumbnail para o usuário.

Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2019/02/12/html5-file-api-aula-3-de-6-lendo-arquivos-locais-serie-html5-sw9].

#O que veremos nesta aula?

Chegou a hora de você aprender como é possível acompanhar o progresso de leitura de um arquivo. Nesta AULA, você terá a oportunidade de incrementar o projeto galeria de imagens, incluindo uma lógica de verificação de progresso de leitura e exibição de uma barra (progressbar) para o usuário.

Você vai ter contato com os eventos loadstartload progress para chegarmos ao resultado esperado.

#Barra de Progresso

Antes de trabalharmos com os eventos fornecidos pelo File API, precisamos definir qual componente usaremos para a barra de progresso.

A barra de progresso é o principal item que devemos implementar, já que ele é o único que será visto pelo usuário. Aproveitando que o nossa trilha atual está relacionada com HTML5, iremos usar a tag progress (nativa do HTML5).

O uso dela é bem simples e a sintaxe é:

<progress id="progress-bar" value=0 max=100 ></progress>

Em resumo, usaremos os atributos max value para atualizar a barra de progresso.

Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.

#Fluxo de trabalho

Qual a ordem que devemos seguir para implementar a lógica de progresso de leitura? Não existe um fluxo obrigatório a ser seguido, mas a minha sugestão é usar o fluxo a seguir (mesmo fluxo que usaremos para a galeria de imagens):

  1. Usar o manipulador de evento onloadstart;
  2. Usar o manipulador de evento onprogress;
  3. Usar o manipulador de evento onload.

#Evento loadstart

Devemos associar ao manipulador onloadstart, o código necessário que será executado no momento que o evento loadstart for disparado. Mas quando este evento é disparado? O seu disparo ocorre no exato momento que uma operação de leitura é iniciada. Sabendo disso, associaremos a este manipulador, o código que vai inicializar e exibir a barra de progresso;

#Evento progress

Neste ponto vamos usar o manipulador onprogress, e associar a ele o código de controle e checagem do progresso de leitura.

Como deve funcionar? Durante a operação de leitura, o evento progress é disparado n vezes. A cada disparo, vamos fazer uma checagem avaliando o total de bytes do arquivo que está sendo lido e a quantidade lida até o momento. Estas informações são geradas e armazenadas nas propriedades total e loaded.

total = quantidade total de bytes do arquivo

loaded = quantidade de bytes transferido desde o começo da operação de leitura

Como complemento, também vamos usar a propriedade lengthComputable (tipo booleano) para checar se a quantidade total de bytes do arquivo é conhecida ou não.

#Evento load

Como o evento load é disparado quando uma operação de leitura é finalizada com sucesso (arquivo lido com sucesso), vamos associar ao manipulador onload o código que vai substituir a barra de progresso pelo thumbnail.

Por hoje é só, fiquem agora com o vídeo que preparei para vocês. Go Go Go

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[Conclusão]

Na aula de hoje [HTML5 File API | Aula 4 de 6 – Monitorando o progresso da leitura de cada arquivo | Série HTML5 | SW9], você aprendeu como acompanhar o progresso de leitura dos arquivos e exibir uma barra de progresso ao usuário. Tudo isso foi possível graças ao uso combinado dos eventos loadstart, progress  e load.

Está disponível na minha área de downloads o projeto parcial. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.

Dentro da minha área de Downloads, procure pela pasta HTML5/FILEAPI  O resto é com vocês :-)

Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

[Links úteis]

Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph

Link do vídeo: https://youtu.be/fsGuEEFYF9E

PlayList Cloud 9: https://goo.gl/7aQbD6

PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

PlayList File API: https://www.youtube.com/playlist?list=PLtluGZbI5EShAJ52WKsU1MUpmgQpOPkVl

Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?