-1

Eu estou querendo possibilitar ao cliente mudar a foto de capa da sua rede social, porém preciso fazer um preview para ele.

Não posso colocar uma tag img agora pois vai bugar todo o design.

Eu gostaria de setar a imagem através da propriedade Background-Image da DIV pai da capa.

Segue o código de como estou tentando fazer:

$(function(){
        $('#mudarcapa').change(function(){
            const file = $(this)[0].files[0]
            const fileReader = new FileReader()
            fileReader.onloadend = function(){
                $('#capa').css("background-image", fileReader.result); 
            }
            fileReader.readAsDataURL(file);
        })
    })
<label for="mudarcapa" class="mudarcapa">
    <a>Adicionar Capa</a>
</label>
<input type="file" name="arquivo" id="mudarcapa">

1 Resposta 1

0

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
     $('#capa').css('background-image', 'url(' + e.target.result + ')');
    }
    
    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
#capa {
width:50px;
height:50px;
background-position:center;
background-size:contain;
border:1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
</form>

<div id="capa"></div>

Créditos para https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded pelo código organizado; onde só foi alterado o src pelo atributo background-image

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .