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.

Artigos relacionados