CHANGE INPUT FILE STATUS

Question

CHANGE INPUT FILE STATUS

Navigation

#1 by (0 votes)

0

Ee! So I wanted you to choose 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 a label triggers it. Follow the code and a photo below.

<divclass="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

asked by anonymous 03.09.2018 / 21:08

1 answer

Pusher Error - Uncaught ReferenceError: Pusher is not defined Use filter or map in an observable firebase

score 0 · Answer 1

Create a div in the location where you want the filename to appear and put a id , for example:

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

Use the API FileReader to get 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><scriptsrc="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>