Preview de imagens antes do upload

Preview de imagens antes do upload

Tulio Faria
Tulio Faria13 de novembro de 2017

Hoje vamos fazer o preview da imagem que está sendo selecionada para fazer upload, isso é bastante interessante de se fazer quando o usuário está selecionando uma foto.

Vamos criar inicialmente um html, em seguida criar um input type do tipo file e um img:

<html>
  <head>Preview Upload</head>
  <body>
    <input type='file' id='upload' />
    <img id='img' />
    <script
      src='https://code.jquery.com/jquery-3.2.1.slim.js'
      integrity='sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg='
      crossorigin='anonymous'
    ></script>
  </body>
</html>

Agora vamos abrir uma tag script nele. Quando o documento estiver pronto e for feito um change, vamos fazer um console.log this:

<script>
  $(function()
  {$('#upload').change(function () {
    console.log($(this)[0].files)
  })})
</script>

Assim estamos pegando o arquivo na posição zero. A partir disso, vamos criar um const que vai ser igual a this na posição 0. Já que ele é uma instância de files, conseguimos utilizar um fileReader e ler e processar esse arquivo:

<script>
  $(function()
  {$('#upload').change(function () {
    const file = $(this)[0].files[0]
    const fileReader = new fileReader()
    fileReader.onLoadend = function () {
      console.log(fileReader.result)
    }
    fileReader.readAsDataURL(file)
  })})
</script>

Como a imagem gera uma URL válida, se eu colocá-lo como source da imagem, ele vai dar um preview.

<script>
    $(function(){
        $('#upload').change(function(){
            const file = $(this)[0].files[0]
            const fileReader = new fileReader()
            fileReader.onLoadend = function(){
                $('#img')attrib('src', .fileReader.result)
            }
            fileReader.readAsDataURL(file)
        })
    })
</script>

Isso é muito interessante para a experiência do usuário como um todo. Imagine se eu estivesse selecionando um documento, seria muito mais fácil se eu estivesse prevendo ele.

Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!

Tulio Faria
Autor
Tulio Faria13 de novembro de 2017

Últimas do Blog