CHANGE INPUT FILE STATUS

Asked

Viewed 275 times

1

And ae! So, I wanted that when choosing a photo in the input, the name of the file/ photo was printed under the input or inside, whatever... Ahh, yes... The input ta with diplay:None; only that a label triggers it. Follow the code and a photo just below.

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>
html5 input value

  • Friend without your full CSS of this component has no way to give you an accurate answer. Please edit your question with HTML/CSS/JS

1 answer

1

Create a div where you want the file name to appear and put a id, for example:

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

Use the API Filereader to take the name of the selected file and send it to 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>

Browser other questions tagged html5 input value

You are not signed in. Login or sign up in order to post.