0

E ae! Então, queria que ao escolher uma foto no input, o nome do arquivo/foto fosse printado em baixo do input ou dentro, tanto faz... Ahh, sim... O input ta com diplay:none; só que um label dispara ele. Segue o código e uma foto logo abaixo.

Imagem

<div class="col-md-6 text-center" style="margin-top:10px;">
  <p class="col-md-offset-1 col-md-10" style="color:#000; margin-bottom:20px; font-size:14pt; border-bottom:1px solid #cacaca; font-family:Montserrat; letter-spacing:3px;">FOTO DE CAPA</p>
  <span style="font-size:11pt; font-family:'Poppins', sans-serif" class="text-muted">Dimensões mínimas: 1280px 1080px <br> Formatos: JPG, PNG, WEBP, GIF</span>
  <!-- AQUI -->
  <label for="editBg" class="labelUp" style="margin-top:5px;">ENVIAR FOTO</label>
  <input type="file" name="editBg" id="editBg">
</div>
1
  • Amigo sem seu CSS completo desse componente não tem como te dar uma resposta precisa. Favor edite sua pergunta com HTML/CSS/JS
    – hugocsl
    3/09/2018 às 19:17

1 Resposta 1

0

Crie uma div no local onde você deseja que apareça o nome do arquivo e coloque um id, por exemplo:

<div id="nomearquivo"></div>

Use a API FileReader para pegar o nome do arquivo selecionado e enviar para a div:

$("#editBg").change(function(evt){
   
   var f = evt.target.files[0]; 

   if($(this).val() && f){
      var r = new FileReader();
      r.onload = function(){ 
         $("#nomearquivo").text(f.name);
      }
      r.readAsText(f);
   }else{
      $("#nomearquivo").empty(); // esvazia a div caso o input esteja vazio
   }
   
});
#editBg{
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="col-md-6 text-center" style="margin-top:10px;">
  <p class="col-md-offset-1 col-md-10" style="color:#000; margin-bottom:20px; font-size:14pt; border-bottom:1px solid #cacaca; font-family:Montserrat; letter-spacing:3px;">FOTO DE CAPA</p>
  <span style="font-size:11pt; font-family:'Poppins', sans-serif" class="text-muted">Dimensões mínimas: 1280px 1080px <br> Formatos: JPG, PNG, WEBP, GIF</span>
  <div id="nomearquivo"></div>
  <label for="editBg" class="labelUp" style="margin-top:5px;">ENVIAR FOTO</label>
  <input type="file" name="editBg" id="editBg">
</div>

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 .