show selected file modified file file

Question

show selected file modified file file

Navigation

#1 by (1 votes)

0

Good morning:

I am trying to customize the input file of a form, but when I put the corresponding styles, it is modified well, when I give it to select the file the window opens, but when I select it, then the name of the file does not appear next to the button and I do not know how to do it.

HTML

<div style="margin-left: 225px; margin-top: -65px;" id="carta_nominador_div">
     <label for="carta_nominador" style="color: #fff; background: #000; width: 142px; height: 52px;  border-radius: 100px;cursor: pointer;">
          <span class="iborrainputfile">ATTACH FILE</span>
     </label>
     <input type="file" name="carta_nominador" id="carta_nominador" class="inputfile inputfile-1" data-multiple-caption="{count} archivos seleccionados" multiple="">

    </div>

CSS

.iborrainputfile { font-size: 14px; font-weight: normal; position: absolute; margin-top: 17px; margin-left: 25px; }

.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.inputfile-1 + label { color: #fff; background-color: #000; }
.inputfile + label { max-width: 80%; cursor: pointer; padding: 0.625rem 1.25rem; width: 142px;  border-radius: 25px; height: 52px; }

How could I make the name of the selected file appear to me?

Thank you very much, best regards

jquery html5 css3

asked by derek 03.11.2017 в 11:24

source

1 answer

Getting the value of a field in Firebase in Android Studio Problem with complex PostgreSQL query

score 1 · Accepted Answer

By hiding the browser control, you are also hiding the internal tag where the name of the selected file is displayed. You can not hide the component partially so you could recover the selected file yourself and display it on your own label.

$("#carta_nominador").change(function(){
  var fichero_seleccionado = $(this).val();
  var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\]/, ''); //Eliminamos el path hasta el fichero seleccionado
  $("#fichero_seleccionado").text(nombre_fichero_seleccionado);
});

.iborrainputfile { font-size: 14px; font-weight: normal; position: absolute; margin-top: 17px; margin-left: 25px; border: 1px solid grey; padding: 5px; background: lightgrey; }

.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.inputfile-1 + label { color: black; background-color: #000; }
.inputfile + label { max-width: 80%; cursor: pointer; padding: 0.625rem 1.25rem; width: 142px;  border-radius: 25px; height: 52px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carta_nominador_div">
     <label for="carta_nominador" style="background: #000; width: 142px; height: 52px;  border-radius: 100px;cursor: pointer;">
          <span class="iborrainputfile">ATTACH FILE</span>
     </label>
     <span id="fichero_seleccionado">Seleccione un fichero</span>
     <input type="file" name="carta_nominador" id="carta_nominador" class="inputfile inputfile-1" data-multiple-caption="{count} archivos seleccionados" multiple="">
</div>

I have modified the styles a bit so that it is displayed correctly. I've added a span tag with id='fichero_seleccionado' to show the name of the selected file.

What we do here is subscribe to the event change of the control of the file and recover the value of the component to show it.