Upload de múltiplas imagens com barra de progresso usando AngularJS, Bootstrap e PHP

Vamos aprender como criar uma galeria de imagens sem banco de dados usando diversos recursos tais como AngularJS, PHP, Bootstrap e ainda redimensionamento de imagens usando WideImage, possibilitando ao usuário o envio de diversas imagens.

Tempo: 01:14:55 min

Descrição: Nesse pocket vídeo vamos criar uma galeria de fotos de forma prática e objetiva usando diversas tecnologias. Iniciaremos o nosso Pocket baixando as dependências e configurando o ambiente com os softwares necessários. Após, vamos criar nosso template base configurando o uso do Bootstrap, jQuery e AngularJS. Depois, vamos criar nossa app e nosso controller que farão o controle dos arquivos selecionados e ainda permitirão a execução das ações de upload e cancelamento e demais operações necessárias. De forma prática aprenderemos como criar um campo de imagem que permitirá selecionar vários arquivos, onde limitaremos em 5 arquivos para o exemplo. Em seguida criaremos a nossa fila de arquivos a ser enviados e ainda suas respectivas barras de progresso e botões de ação. Na parte do PHP vamos criar um serviço que receberá os arquivos enviados, redimensionará os mesmos através da classe WideImage e retornará um aviso para a interface. Na parte de visualização vamos criar um serviço que retornará todas as imagens cadastradas e, usando AngularJS, exibiremos as imagens e criaremos a janela modal para abrir a imagem em tamanho maior através da janela modal do Bootstrap. Vale lembrar que nossa galeria de imagens não utiliza banco de dados para armazenar os arquivos.

Ebook exclusivo
Dê um upgrade no início da sua jornada. Crie sua conta grátis e baixe o e-book

Artigos relacionados