JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<input type="file" name="Foto" class="form-control" id="fileUpload" placeholder="Foto">
<img id="imagem" src="#" alt="Preview da sua imagem" style="width: 130px; margin-top: 10px; display: none" class="img-thumbnail" />
<label id="excluir" style="margin-left: 50px; color: #00F; display: none">Excluir</label>
CSS
#excluir{
cursor: pointer;
cursor: hand;
}
JavaScript
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#imagem").attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#fileUpload").change(function(){
readURL(this);
$("#imagem").css("display","block");
$("#excluir").css("display","block");
});
$("#excluir").click(function(){
$("#fileUpload").val("");
$("#imagem").css("display","none");
$("#excluir").css("display","none");
});