Preview de imagens antes do upload

Escrito por

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:

1<html>
2 <head>Preview Upload</head>
3 <body>
4 <input type="file" id="upload" />
5 <img id="img" />
6 <script
7 src="https://code.jquery.com/jquery-3.2.1.slim.js"
8 integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
9 crossorigin="anonymous"
10 ></script>
11 </body>
12</html>

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

1<script>
2 $(function()
3 {$("#upload").change(function() {
4 console.log($(this)[0].files)
5 })})
6</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:

1<script>
2 $(function()
3 {$("#upload").change(function() {
4 const file = $(this)[0].files[0]
5 const fileReader = new fileReader()
6 fileReader.onLoadend = function() {
7 console.log(fileReader.result)
8 }
9 fileReader.readAsDataURL(file)
10 })})
11</script>

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

1<script>
2 $(function(){
3 $('#upload').change(function(){
4 const file = $(this)[0].files[0]
5 const fileReader = new fileReader()
6 fileReader.onLoadend = function(){
7 $('#img')attrib('src', .fileReader.result)
8 }
9 fileReader.readAsDataURL(file)
10 })
11 })
12</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.

Deixe suas dúvidas e sugestões nos comentários. 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!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium