Preview de imagem antes do upload FileReader 6


Bom dia pessoal, de volta a ativa! =)

Vou mostrar como fazer o preview de imagem antes do upload FileReader() em jQuery. Suponha que você tenha um site onde o usuário faz upload de fotos e em seguida eles querem carregar apenas algumas fotos selecionadas.

Então, usando HTML5 FileReader() somos capazes de pré-visualizar a imagem com jQuery antes de fazer upload no servidor.

Segue abaixo o código detalhado de como pré-visualizar a imagem antes de enviar.

 

Marcação HTML:

Esta div (#image-holder) é usado como suporte onde mostramos a nossa imagem de pré-visualização antes de carregá-lo no servidor com o exemplo dado abaixo.

Código jQuery:

Primeiro é vincular um change no input, em seguida é verificado se o browser suporta o método FileReader do HTML5.

 

fileReader

 

Fonte: www.codepedia.info

  • Yan

    deixa, já entendi. valeu..

  • Yan

    teria como explicar melhor?

  • iMurilo Cruz

    Altera o style apos a class

  • Álvaro Júnior

    Opa… muito bom… e como mexer no tamanho: Quero encaixar numa tela de cadastro bootstrap

  • Wemerson Bernardo

    Opa… muito bom… e como mexer no tamanho: Quero encaixar numa tela de cadastro bootstrap

  • Thanks, esse funfo 100%! Deus te abençoe matheuspiscioneri.