Tag: JQuery

Redimensionar imagem antes de enviar com Javascript

Normalmente, quando fazemos o upload de uma imagem nós precisamos redimensiona-lá para reduzir seu tamanho. Esse processo normalmente é feito do lado servidor, ou seja, enviamos a imagem na sua forma e tamanho original e então redimensionamos no servidor utilizando PHP, por exemplo.

Porém, em um aplicativo de galeria de fotos, por exemplo, o usuário normalmente baixa as fotos (em alta resolução) de sua câmera e quer em seguida enviar para o aplicativo. Supondo que ele deseja enviar 200 fotos, cada uma com 5 MB, seria necessário fazer o upload de 1 GB de dados para o servidor, para que então possamos reduzi-las em um tamanho viável.

Sendo assim, pretendo apresentar nesse artigo uma solução para este problema. Vamos ver como redimensionar a imagem antes de enviar ao servidor, utilizando Javascript. Para isso faremos um formulário para envio de várias imagens que serão salvas em uma pasta no servidor.

Confira o exemplo em funcionamento, clicando aqui.

Salvar imagem no banco de dados com PHP/MySQL

Quando precisamos fazer o upload de uma imagem, geralmente temos duas opções:

  • 1 – Copiar a imagem em uma pasta no servidor e salvar apenas o caminho no banco de dados, como é feito nesse artigo.
  • 2 – Converter a imagem para binário e salvá-la diretamente no banco de dados.

O primeiro método é o mais comum, pois é mais fácil de ser implementado, além de ter melhor desempenho. Porém, em alguns casos torna-se necessário salvar a imagem diretamente no banco de dados, e assim recorremos ao segundo método. A desvantagem é que é um pouco mais trabalhoso de ser implementado e o desempenho é menor se comparado ao primeiro método, pois será necessário converter a imagem de binário para seu formato original toda vez que for necessário mostrá-la ao usuário.

Nesse artigo veremos como implementar o segundo método. Criaremos um cadastro de fotos sem contexto, apenas para demostrar a ideia, vamos nessa?

Confira o exemplo em funcionamento, clicando aqui.

Facilitando requisições AJAX com jQuery Form Plugin

A biblioteca JQuery já nos facilita bastante a fazer requisições AJAX. Porém, sempre que enviamos um formulário via AJAX, normalmente é necessário armazenar todos os campos em variáveis para então enviar ao servidor. O jQuery Form Plugin é um plugin que tem o objetivo de facilitar ainda mais esse processo. Basicamente, ao enviar um formulário, o plugin armazena as informações de cada elemento do formulário e envia ao servidor utilizando AJAX. Para exemplificar seu uso, vamos criar um formulário bem simples.

Upload dinâmico com PHP/jQuery

Olá pessoal, tudo certo? Várias pessoas me perguntam como fazer upload de arquivos com ajax e hoje pretendo apresentar uma solução para isso. Na verdade, não se trata de um upload com ajax, mas sim um upload dinâmico, porém para um usuário comum isso é indiferente.

A solução é simples e conhecida: fazer um iframe contendo um campo do tipo file, fazemos o envio desse arquivo dentro do iframe e então com a ajuda do jQuery recuperamos as informações desse arquivo e trazemos para a página pai. Nesse artigo irei utilizar anexo de arquivos como exemplo.

Confira o resultado final

Carregamento dinâmico de registros com PHP/JQuery/AJAX

Olá pessoal, tudo certo? O artigo de hoje foi baseado em uma sugestão que achei interessante. Trata-se de um carregamento dinâmico de registros, assim como no twitter que, em nossa home, quando clicado em “more” ele nos traz mais tweets. Outro exemplo é o formspring.me que quando clicado em “more” ele nos traz mais perguntas. No nosso caso, iremos utilizar frases como exemplo.

Confira o resultado final, clicando aqui.