Preview de imagens antes do upload
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: Agora vamos abrir uma tag script nele. Quando o documento estiver…
Preview de imagens antes do upload
por: Tulio Faria
Categoria: DicasVideo-Tutorial
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.
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!