Olá, tudo bem? Nesse vídeo eu mostro passo a passo como funciona a ferramenta JQuery File Upload e como implementar a comunicação com Banco de Dados MySQL.

 

Vantagens de usar JQuery File Upload:

 

Essa ferramenta JQuery, permite fazer o upload de múltiplas imagens de forma simultânea.

Você pode gerenciar uma lista para upload inserindo e excluindo imagens da lista antes de fazer o upload propriamente dito.

Dá também para excluir várias imagens ao mesmo tempo. Além disso, a interface exibe uma thumbnail da imagem selecionada, o nome e o tamanho do arquivo.

E também mostra uma barra de progressão com o andamento do Upload. Na verdade exibe várias barras de progressão, uma para cada arquivo selecionado, e uma geral para o progresso da lista.

 

Enfim, uma ferramenta bem completa e com uma interface bem fácil de usar. E dá para integrar de maneira muito fácil à qualquer aplicação.

 

Como por padrão, a ferramenta não tem conexão com Banco de Dados, é isso que a gente vai fazer nesse vídeo. Então eu vou mostrar como funciona esse gerenciamento de imagens pela ferramenta, e a gente vai fazer algumas modificações para implementar a comunicação com o Banco de Dados.

Espero que você goste do vídeo, e que esse conteúdo possa te ajudar a aperfeiçoar seu conhecimento.

 

 

 

JQuery File Upload Download
https://github.com/arswdesign/jQuery-File-Upload

 

 

Siga a Fanpage no Facebook e receba outros vídeos e novidades em primeira mão:
http://www.facebook.com/alexrosa.page

  1. O que seria de nós sem pessoas como você que postam essas dicas…
    Agradeço e parabenizo.
    Contudo, gostaria muito de saber como posso mudar o local (pasta) aonde as fotos são salvas.

    • Obrigado Jetro, pelo comentário. Como já nos falamos, dá uma procurada no próprio UploadHandler, tem uma variável com o caminho do upload.

  2. Parabéns alexrosa.net gravação bd 100% a unica coisa que não consegui fazer foi o delete do jquery file upload funcionar

    Mas o resto td ok

    abraços

  3. Grandes videos. tem me ajudado bastante. mas surgiu uma dúvida que não estou conseguindo resolver. como usar esse file upload com o exemplo do jquery sortable que vc tbm mostrou em video?

  4. Olá,

    Muito bacana a vídeo aula funcionou perfeitamente, mas como faz para trocar o arquivo que faz o upload de pasta, quando trocar este que tem os botões de pasta ele começou a dar erro.

    • Não realizei este procedimento para pode lhe ajudar Pedro. Se conseguir poste aqui como você fez, quem sabe está pode ser a dúvida de outras pessoas também.

  5. Jonas Ribeiro

    Muito bom Alex, vídeo bem explicado, tenho uma situação em que necessito alterar a pasta de upload dos arquivos de acordo com o banco, eu consigo enviar o id para o index, porém a pasta de upload está no arquivo UploadHandler.php e lá não consigo enviar o id para consultar o banco e trazer a pasta específica que eu preciso que faça o upload, existe alguma forma mais simples de fazer? desde já agradeço.

  6. bom dia alex , seguinte eu baixei o código e estou fazendo o teste loca, acontece que eu fiz um include e quando vou abrir e tento selecionar as imagens não aparece a imagem thumb e os botões no lado direito e também quando tento fazer ação do upload o action da codigo vai pra este link: http://jquery-file-upload.appspot.com/ e da esse erros:

    {“files”:[{“url”:”http://jquery-file-upload.appspot.com/image%2Fjpeg/1687109139/308.jpg”,”thumbnailUrl”:”http://jquery-file-upload.appspot.com/image%2Fjpeg/1687109139/308.jpg.80×80.jpg”,”name”:”308.jpg”,”type”:”image/jpeg”,”size”:36031,”deleteUrl”:”http://jquery-file-upload.appspot.com/image%2Fjpeg/1687109139/308.jpg”,”deleteType”:”DELETE”}]}

    como eu faço pra fazer os teste no meu ambiente local, tem como vc me orientar?

  7. bom dia muito bom gostei bastante da aula

    penso em implementar esta função em um site de imóveis que estou fazedor
    porem vou precisar grava junto da foro um id que representa o imóvel que as fotos pertence pode dar uma dica

Deixe seu comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *