HTML5 File API | Aula 2 de 6 – Selecionando, Acessando e Obtendo informação de arquivos | 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 primeira AULA, fiz uma apresentação rápida sobre a File API, explicando para que ela serve, quais os principais objetos e implementando o feature detection, para identificar se a API é compatível ou não com o navegador que o usuário está usando.
Também foi apresentado o projeto que vamos desenvolver ao longo da AULAS, onde será possível aplicar os recursos essenciais do File API.
Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2019/01/29/html5-file-api-aula-1-apresentacao-e-feature-detection-sw9].
#O que veremos nesta aula?
Vou explicar passo a passo como podemos selecionar 1 ou mais arquivos locais, acessá-los usando o objeto FileList e, para encerrar, vamos obter as informações básicas de cada arquivo e exibi-las na página web.
#Selecionando arquivos
Tudo começa com a seleção de arquivos a partir do navegador. Como o nosso objetivo é construir uma galeria de imagens, vamos começar criando a área que vai permitir a seleção e exibição dos arquivos do tipo imagem. Dentro desta área, vou utilizar um campo do tipo file (input type=’file’) e configurar para que apenas imagens possam ser selecionadas.
Aqui vai uma dica: o campo do tipo file permite por padrão selecionar apenas 1 arquivos por vez. Como o objetivo aqui é permitir que o usuário possa selecionar mais de uma imagem, vamos incluir o atributo multiple. A simples inclusão deste atributo, dentro da tag input, configura o campo para permitir múltipla seleção 😀
Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.
#Acessando os arquivos selecionados
Até agora nenhum segredo né. O processo é bem simples. Acabamos de selecionar os arquivos. E agora? O que precisamos fazer para acessá-los usando o File API?
Após o disparo do evento onchange, configuramos o eventlistener para chamar uma função que será responsável por acessar e obter dados das imagens selecionadas.
Para acessar os arquivos o segredo é usar um objeto chamado FileList. este objeto é criado automaticamente a cada nova seleção de arquivos e contém uma lista de objetos do tipo File. Se selecionarmos apenas 1 arquivo, teremos um único item na lista, se selecionarmos 2 arquivos, teremos dois itens na lista, e assim por diante.
Falando agora sobre o código que devemos usar, basta percorrermos esta lista para extrair a referência de cada arquivo.
O código poderia ser escrito assim:
//Percorrendo a lista de objetos do tipo file for (var i = 0, f; f = files[i]; i++) {}
#Obtendo informações dos arquivos
Agora que já aprendemos a acessar os arquivos, a cada interação vamos obter algumas informações básicas de cada arquivo. Para a nossa galeria de imagens, vamos obter o nome da imagem e também o seu tamanho. Estas informações podem ser recuperadas da seguinte forma: f.name (traz o nome da imagem) e f.size (traz o tamanho da imagem em bytes), onde (f) é um objeto do tipo File trazido a cada interação. Por sua vez, name e size são as propriedades deste objeto.
Para encerrar, vamos chamar a função addItem, que será responsável por exibir estas informações no navegador.
Por hoje é só, fiquem agora com o vídeo que preparei para vocês. Go Go Go
[Conclusão]
Na aula de hoje [HTML5 File API | Aula 2 de 6 – Selecionando, Acessando e Obtendo informação de arquivos | Série HTML5 | SW9], iniciamos o projeto galeria de imagens. Criamos a área de seleção de arquivos (apenas imagens), o código necessário para acessar os arquivos localmente, obter os dados de cada imagem e exibi-los na tela.
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/Xr47t_r01F4
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 Drag & Drop:
Á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
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário