JSFiddle - React, Tailwind, and code Playground

by Brunno Romero

HTML

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="sua imagem" />
</form>

JavaScript

function leUrl(input) {
        if (input.files && input.files[0]) { //verifica se o arquivo não está nulo
            var reader = new FileReader(); //instancia um objeto FileReader que permite aplicações web ler o conteúdo dos arquivos (ou buffers de dados puros)

            reader.onload = function (e) { //Este evento é chamado cada vez que a operação de leitura é completada com sucesso.
                $('#blah').attr('src', e.target.result); //aqui seto a imagem no src da div a cima
            }

            reader.readAsDataURL(input.files[0]); //Inicia a leitura do conteúdo que caira após o peração completar na função a cima
        }
    }

    $("#imgInp").change(function () { //aqui seto a função no evento de change do campo
        leUrl(this);
    });