Como utilizar JQuery File Upload com Banco de Dados
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/alexwarscode
Leandro
TOP
Jetro Bernardo
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.
Alex
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.
Andreia
A documentação é bem vaga quanto a mudar a pasta de destino.
Não tem como você nos orientar, neste sentido?
Natan Felles
Parabéns, brother. Ótimos conteúdos. Belo site.
Alex
Vlw. Obrigado.
paulo
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
Alex
Opa.. Obrigado Paulo. Espero que consiga resolver o problema com o Delete. 🙂
lucas
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?
Alex
Ainda não tentei usar as duas libs juntas.. Basicamente seria escrever as imagens em uma lista identificada para sortable.
Art Publicidade
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.
Alex
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.
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.
Michel Fernandes
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?
Álvaro
Alex,
O post continua TOP em 2018.
Obrigado pelo tutorial.
Álvaro
Alex
Obrigado 🙂
Marcos
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
Marco Antonio
Olá Alex. Muito bom vídeo. Consegui resolver o erro token …, baixando outro arquivo. O plugin faz o upload porém não mostra a foto. Aparece o síbolo de proibido em vermelho ,,, rsss. O que seria? Um abraço e obrigado!